templates editor #62

* golang debug

* handle template in playlist download

* code refactoring, dropped goccy go json

.dockerignore

@@ -1,15 +1,18 @@
-node_modules
-downloads
 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
+examples/

.github/workflows/docker-image.yml

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

.github/workflows/docker-publish.yml

@@ -1,31 +1,14 @@
-name: Docker (ghcr.io)
+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:
-    branches: [ master ]
   schedule:
     - cron : '0 1 * * 0'
 
-env:
-  # Use docker.io for Docker Hub if empty
-  REGISTRY: ghcr.io
-  # github.repository as <account>/<repo>
-  IMAGE_NAME: ${{ github.repository }}
-
-
 jobs:
-  build:
+  publish:
-
     runs-on: ubuntu-latest
     permissions:
       contents: read
@@ -33,65 +16,67 @@ jobs:
       # This is used to complete the identity challenge
       # with sigstore/fulcio when running outside of PRs.
       id-token: write
-
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      # Install the cosign tool except on PR
       # https://github.com/sigstore/cosign-installer
       - name: Install cosign
-        if: github.event_name != 'pull_request'
+        # v3.1.2
-        uses: sigstore/cosign-installer@1e95c1de343b5b0c23352d6417ee3e48d5bcd422
+        uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
         with:
           cosign-release: 'v1.13.1'
 
-
+      - 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: .
+          push: true
           platforms: linux/amd64,linux/arm/v7,linux/arm64
-          push: ${{ github.event_name != 'pull_request' }}
           tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels}}
 
-      # Sign the resulting Docker image digest except on PRs.
-      # This will only write to the public Rekor transparency log when the Docker
-      # repository is public to avoid leaking data.  If you would like to publish
-      # transparency data even for private images, pass --force to cosign below.
-      # https://github.com/sigstore/cosign
       - name: Sign the published Docker image
-        if: ${{ github.event_name != 'pull_request' }}
         env:
           COSIGN_EXPERIMENTAL: "true"
         # This step uses the identity token to provision an ephemeral certificate
         # against the sigstore community Fulcio instance.
-        run: cosign sign ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}@${{ steps.build-and-push.outputs.digest }}
+        run: |
+          cosign sign ghcr.io/${{ github.repository }}@${{ steps.build-and-push.outputs.digest }}
+          cosign sign docker.io/${{ secrets.DOCKER_HUB_USERNAME }}/yt-dlp-webui@${{ steps.build-and-push.outputs.digest }}

.github/workflows/test-container.yml

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

.gitignore

@@ -1,11 +1,8 @@
-.parcel-cache
 dist
 package-lock.json
 pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
-src/server/core/*.exe
-src/server/core/yt-dlp
 .env
 *.mp4
 *.ytdl
@@ -16,3 +13,5 @@ downloads
 build/
 yt-dlp-webui
 session.dat
+config.yml
+cookies.txt

.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,33 +1,30 @@
-FROM golang:1.20-alpine AS build
+FROM golang:alpine AS build
-# folder structure
+
-WORKDIR /usr/src/yt-dlp-webui
-# install core dependencies
 RUN apk update && \
-    apk add nodejs npm go
+    apk add nodejs npm
-# copia la salsa
+
-COPY . .
+COPY . /usr/src/yt-dlp-webui
-# build frontend
+
 WORKDIR /usr/src/yt-dlp-webui/frontend
+
 RUN npm install
 RUN npm run build
-# build backend + incubator
+
 WORKDIR /usr/src/yt-dlp-webui
 RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
 
-# but here yes :)
 FROM alpine:edge
 
-WORKDIR /downloads
+VOLUME /downloads /config
-VOLUME /downloads
 
 WORKDIR /app
 
 RUN apk update && \
-    apk add psmisc ffmpeg yt-dlp
+    apk add psmisc ffmpeg yt-dlp --no-cache
 
 COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
 
 ENV JWT_SECRET=secret
 
 EXPOSE 3033
-ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]

Makefile

@@ -6,11 +6,10 @@ all:
 	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
 
 multiarch:
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm main.go
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 main.go
-	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 main.go
 	mkdir -p build
-	mv yt-dlp-webui* build
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o build/yt-dlp-webui_linux-arm main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o build/yt-dlp-webui_linux-arm64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
 
 clean:
 	rm -rf build

README.md

@@ -15,14 +15,14 @@ The bottleneck remains yt-dlp startup time.
 docker pull marcobaobao/yt-dlp-webui
 ```
 ```sh
-# latest stable
+# latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# latest dev version
+# latest stable version
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```
 
-![](https://i.ibb.co/RCpfg7q/image.png)
+![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
-![](https://i.ibb.co/N2749CD/image.png)
+![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
 
 ### Integrated File browser
 Stream or download your content, easily.
@@ -68,6 +68,7 @@ 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)
@@ -84,8 +85,9 @@ Future releases will have:
 -   ~~Multi download~~ *done*
 -   ~~Exctract audio~~ *done*
 -   ~~Format selection~~ *done*
--   Download archive
+-   ~~Download archive~~ *done*
 -   ~~ARM Build~~ *done available through ghcr.io*
+-   Playlist support
 
 ## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
@@ -105,6 +107,12 @@ Or with docker but building the container manually.
 ```sh
 docker build -t yt-dlp-webui .
 docker run -d -p 3033:3033 -v <your dir>:/downloads yt-dlp-webui
+
+docker run -d -p 3033:3033 \
+  -v <your dir>:/downloads \  
+  -v <your dir>:/config \ # optional
+  yt-dlp-webui
+
 ```
 
 If you opt to add RPC authentication...
@@ -113,9 +121,23 @@ 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 \
-    --secret your_rpc_secret
+    --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
 ```
 
 ## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation
@@ -134,6 +156,27 @@ yt-dlp-webui --out /home/user/downloads --driver /opt/soemdir/yt-dlp
 yt-dlp-webui --conf /home/user/.config/yt-dlp-webui.conf
 ```
 
+### Arguments
+```sh
+Usage yt-dlp-webui:
+  -auth
+        Enable RPC authentication
+  -conf string
+        Config file path
+  -driver string
+        yt-dlp executable path (default "yt-dlp")
+  -out string
+        Where files will be saved (default ".")
+  -port int
+        Port where server will listen at (default 3033)
+  -qs int
+        Download queue size (default 8)
+  -user string
+        Username required for auth
+  -pass string
+        Password required for auth
+```
+
 ### Config file
 By running `yt-dlp-webui` in standalone mode you have the ability to also specify a config file.
 The config file **will overwrite what have been passed as cli argument**.
@@ -148,7 +191,10 @@ downloaderPath: /usr/local/bin/yt-dlp
 
 # Optional settings
 require_auth: true
-rpc_secret: my_random_secret
+username: my_username
+password: my_random_secret
+
+queue_size: 4
 ```
 
 ### Systemd integration

examples/Caddyfile

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

examples/nginx.conf

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

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-dlp-webui",
-  "version": "2.0.7",
+  "version": "2.10.0",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",
@@ -9,29 +9,28 @@
   "author": "marcopeocchi",
   "license": "MPL-2.0",
   "dependencies": {
-    "@emotion/react": "^11.11.0",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.6",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.2",
+    "@mui/material": "^5.13.5",
-    "@reduxjs/toolkit": "^1.9.5",
+    "fp-ts": "^2.16.1",
-    "fp-ts": "^2.16.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
+    "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.11.2",
+    "react-router-dom": "^6.17.0",
-    "rxjs": "^7.8.1",
+    "recoil": "^0.7.7",
-    "uuid": "^9.0.0"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.2.4",
+    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.7",
+    "@types/react": "^18.2.29",
-    "@types/react-dom": "^18.0.10",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-helmet": "^6.1.8",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.1",
+    "@vitejs/plugin-react-swc": "^3.4.0",
-    "@vitejs/plugin-react": "^4.0.0",
+    "typescript": "^5.2.2",
-    "buffer": "^6.0.3",
+    "vite": "^4.5.0"
-    "typescript": "^5.0.4",
-    "vite": "^4.3.8"
   }
 }

frontend/src/App.tsx

@@ -1,12 +1,11 @@
-import { Provider } from 'react-redux'
 import { RouterProvider } from 'react-router-dom'
+import { RecoilRoot } from 'recoil'
 import { router } from './router'
-import { store } from './stores/store'
 
 export function App() {
   return (
-    <Provider store={store}>
+    <RecoilRoot>
       <RouterProvider router={router} />
-    </Provider>
+    </RecoilRoot>
   )
 }

frontend/src/Layout.tsx

@@ -1,15 +1,11 @@
 import { ThemeProvider } from '@emotion/react'
-
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 import Dashboard from '@mui/icons-material/Dashboard'
+import DownloadIcon from '@mui/icons-material/Download'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
 import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
-import Storage from '@mui/icons-material/Storage'
-
 import { Box, createTheme } from '@mui/material'
-
-import DownloadIcon from '@mui/icons-material/Download'
 import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
 import IconButton from '@mui/material/IconButton'
@@ -19,27 +15,26 @@ import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
-
 import { grey } from '@mui/material/colors'
-
 import { useMemo, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { Helmet } from 'react-helmet'
-
 import { Link, Outlet } from 'react-router-dom'
-import { RootState } from './stores/store'
+import { useRecoilValue } from 'recoil'
-
+import { settingsState } from './atoms/settings'
+import { connectedState } from './atoms/status'
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
-
+import FreeSpaceIndicator from './components/FreeSpaceIndicator'
 import Logout from './components/Logout'
-import { formatGiB } from './utils'
+import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
+import Toaster from './providers/ToasterProvider'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
 
-  const settings = useSelector((state: RootState) => state.settings)
+  const settings = useRecoilValue(settingsState)
-  const status = useSelector((state: RootState) => state.status)
+  const isConnected = useRecoilValue(connectedState)
 
   const mode = settings.theme
   const theme = useMemo(() =>
@@ -53,12 +48,16 @@ export default function Layout() {
     }), [settings.theme]
   )
 
-  const toggleDrawer = () => {
+  const toggleDrawer = () => setOpen(state => !state)
-    setOpen(state => !state)
-  }
 
   return (
     <ThemeProvider theme={theme}>
+      <SocketSubscriber>
+        <Helmet>
+          <title>
+            {settings.appTitle}
+          </title>
+        </Helmet>
         <Box sx={{ display: 'flex' }}>
           <CssBaseline />
           <AppBar position="absolute" open={open}>
@@ -82,27 +81,18 @@ export default function Layout() {
                 noWrap
                 sx={{ flexGrow: 1 }}
               >
-              yt-dlp WebUI
+                {settings.appTitle}
               </Typography>
-            {
+              <FreeSpaceIndicator />
-              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>
+                <span>
+                  &nbsp;{isConnected ? settings.serverAddr : 'not connected'}
+                </span>
               </div>
             </Toolbar>
           </AppBar>
@@ -127,7 +117,7 @@ export default function Layout() {
                   color: mode === 'dark' ? '#ffffff' : '#000000DE'
                 }
               }>
-              <ListItemButton disabled={status.downloading}>
+                <ListItemButton>
                   <ListItemIcon>
                     <Dashboard />
                   </ListItemIcon>
@@ -140,7 +130,7 @@ export default function Layout() {
                   color: mode === 'dark' ? '#ffffff' : '#000000DE'
                 }
               }>
-              <ListItemButton disabled={status.downloading}>
+                <ListItemButton>
                   <ListItemIcon>
                     <DownloadIcon />
                   </ListItemIcon>
@@ -153,7 +143,7 @@ export default function Layout() {
                   color: mode === 'dark' ? '#ffffff' : '#000000DE'
                 }
               }>
-              <ListItemButton disabled={status.downloading}>
+                <ListItemButton>
                   <ListItemIcon>
                     <SettingsIcon />
                   </ListItemIcon>
@@ -176,6 +166,8 @@ export default function Layout() {
             <Outlet />
           </Box>
         </Box>
+        <Toaster />
+      </SocketSubscriber>
     </ThemeProvider>
   )
 }

frontend/src/assets/i18n.yaml

@@ -1,7 +1,7 @@
 ---
 languages:
   english:
-    urlInput: YouTube or other supported service video URL
+    urlInput: Video URL
     statusTitle: Status
     statusReady: Ready
     selectFormatButton: Select format
@@ -29,8 +29,59 @@ languages:
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
     rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may close this window)
+    restartAppMessage: Needs a page reload to take effect
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+  french:
+    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
+    statusTitle: Statut
+    statusReady: Prêt
+    selectFormatButton: Sélectionner le format
+    startButton: Démarrer
+    abortAllButton: Tout arrêter
+    updateBinButton: Mettre à jour l'exécutable yt-dlp
+    darkThemeButton: Thème sombre
+    lightThemeButton: Thème clair
+    settingsAnchor: Paramètres
+    serverAddressTitle: Adresse du serveur
+    serverPortTitle: Port
+    extractAudioCheckbox: Extraire l'audio
+    noMTimeCheckbox: Ne pas définir le temps de modification du fichier
+    bgReminder: Une fois que vous aurez fermé cette page, le téléchargement continuera en arrière-plan.
+    toastConnected: 'Connecté à '
+    toastUpdated: L'exécutable yt-dlp a été mis à jour !
+    formatSelectionEnabler: Activer la sélection des formats vidéo/audio
+    themeSelect: 'Thème'
+    languageSelect: 'Langue'
+    overridesAnchor: Remplacer
+    pathOverrideOption: Activer le remplacement du chemin de sortie
+    filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
+    customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
+    customPath: Chemin personnalisé
+    customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
+    customArgsInput: Arguments yt-dlp personnalisés
+    rpcConnErr: Erreur lors de la connexion au serveur RPC
+    splashText: Aucun téléchargement actif
+    archiveTitle: Archive
+    clipboardAction: URL copiée dans le presse-papiers
+    playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
+    restartAppMessage: Nécessite un rechargement de la page pour prendre effet
+    servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
+    appTitle: Nom de l'application
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   italian:
-    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
+    urlInput: URL Video
     statusTitle: Stato
     startButton: Inizia
     statusReady: Pronto
@@ -57,11 +108,23 @@ languages:
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
     rpcConnErr: Error nella connessione al server RPC
+    splashText: Nessun download attivo
+    archiveTitle: Archivio
+    clipboardAction: URL copiato negli appunti
+    playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
+    restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    appTitle: Titolo applicazione
+    savedTemplates: Template salvati
+    templatesEditor: Editor template
+    templatesEditorNameLabel: Nome template
+    templatesEditorContentLabel: Contentunto template
   chinese:
     urlInput: YouTube 或其他受支持服务的视频网址
     statusTitle: 状态
-    startButton: 开始
     statusReady: 就绪
+    selectFormatButton: 选择格式
+    startButton: 开始
     abortAllButton: 全部中止
     updateBinButton: 更新 yt-dlp 可执行文件
     darkThemeButton: 黑暗主题
@@ -84,7 +147,18 @@ languages:
     customPath: 自定义路径
     customArgs: 启用自定义 yt-dlp 参数（能力越大 = 责任越大）
     customArgsInput: 自定义 yt-dlp 参数
-    rpcConnErr: Error while conencting to RPC server
+    rpcConnErr: 连接 RPC 服务器发生错误
+    splashText: 没有正在进行的下载
+    archiveTitle: 归档
+    clipboardAction: 复制 URL 到剪贴板
+    playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
+    restartAppMessage: 需要刷新页面才能生效
+    servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+    appTitle: App 标题
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -113,34 +187,54 @@ languages:
     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
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   russian:
-    urlInput: YouTube or other supported service video url
+    urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
-    statusTitle: Status
+    statusTitle: Статус
-    startButton: Start
+    startButton: Начать
-    statusReady: Ready
+    statusReady: Готово
-    abortAllButton: Abort All
+    abortAllButton: Прервать все
-    updateBinButton: Update yt-dlp binary
+    updateBinButton: Обновить бинарный файл yt-dlp
-    darkThemeButton: Dark theme
+    darkThemeButton: Темная тема
-    lightThemeButton: Light theme
+    lightThemeButton: Светлая тема
-    settingsAnchor: Settings
+    settingsAnchor: Настройки
-    serverAddressTitle: Server address
+    serverAddressTitle: Адрес сервера
-    serverPortTitle: Port
+    serverPortTitle: Порт
-    extractAudioCheckbox: Extract audio
+    extractAudioCheckbox: Извлечь аудио
-    noMTimeCheckbox: Don't set file modification time
+    noMTimeCheckbox: Не устанавливать время модификации файла
-    bgReminder: Once you close this page the download will continue in the background.
+    bgReminder: Как только вы закроете эту страницу, загрузка продолжится в фоновом режиме.
-    toastConnected: 'Connected to '
+    toastConnected: 'Подключен к '
-    toastUpdated: Updated yt-dlp binary!
+    toastUpdated: Бинарный файл yt-dlp обновлен!
-    formatSelectionEnabler: Enable video/audio formats selection
+    formatSelectionEnabler: Активировать выбор видео/аудио форматов
-    themeSelect: 'Theme'
+    themeSelect: 'Тема'
-    languageSelect: 'Language'
+    languageSelect: 'Язык'
-    overridesAnchor: Overrides
+    overridesAnchor: Переопределить
-    pathOverrideOption: Enable output path overriding
+    pathOverrideOption: Активировать переопределение выходного пути
-    filenameOverrideOption: Enable output file name overriding
+    filenameOverrideOption: Активировать переопределение имени выходного файла
-    customFilename: Custom filemame (leave blank to use default)
+    customFilename: Задать имя файла (оставьте пустым, чтобы использовать значение по умолчанию)
-    customPath: Custom path
+    customPath: Задать путь
-    customArgs: Enable custom yt-dlp args (great power = great responsabilities)
+    customArgs: Включить настраиваемые аргументы yt-dlp (большая сила = большая ответственность)
-    customArgsInput: Custom yt-dlp arguments
+    customArgsInput: Пользовательские аргументы yt-dlp
-    rpcConnErr: Error while conencting to RPC server
+    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
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -169,6 +263,16 @@ languages:
     customArgs: Enable custom yt-dlp args (great power = great responsabilities)
     customArgsInput: Custom yt-dlp arguments
     rpcConnErr: Error while conencting to RPC server
+    splashText: No active downloads
+    archiveTitle: Archive
+    clipboardAction: Copied URL to clipboard
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -198,6 +302,16 @@ languages:
     customArgs: yt-dlpのオプションの有効化 (最適設定にする場合)
     customArgsInput: yt-dlpのオプション
     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
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -226,3 +340,89 @@ languages:
     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
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+  ukrainian:
+    urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
+    statusTitle: Статус
+    startButton: Почати
+    statusReady: Готово
+    abortAllButton: Перервати все 
+    updateBinButton: Оновити бінарний файл yt-dlp
+    darkThemeButton: Темна тема 
+    lightThemeButton: Світла тема 
+    settingsAnchor: Налаштування 
+    serverAddressTitle: Адреса сервера
+    serverPortTitle: Порт 
+    extractAudioCheckbox: Витягти аудіо 
+    noMTimeCheckbox: Не встановлювати час модифікації файлу
+    bgReminder: Як тільки ви закриєте цю сторінку, завантаження продовжиться у фоновому режимі. 
+    toastConnected: 'Підключений до '
+    toastUpdated: Бінарний файл yt-dlp оновлено!
+    formatSelectionEnabler: Активувати вибір відео/аудіо форматів
+    themeSelect: 'Тема'
+    languageSelect: 'Мова'
+    overridesAnchor: Перевизначити
+    pathOverrideOption: Активувати перевизначення вихідного шляху
+    filenameOverrideOption: Активувати перевизначення імені вихідного файлу
+    customFilename: Введіть ім'я файлу (залишіть порожнім, щоб використовувати значення за замовчуванням)
+    customPath: Задати шлях
+    customArgs: Включити аргументи, що настроюються yt-dlp (велика сила = велика відповідальність)
+    customArgsInput: Користувальницькі аргументи yt-dlp
+    rpcConnErr: Помилка при підключенні до сервера RPC
+    splashText: Немає активних завантажень
+    archiveTitle: Архів
+    clipboardAction: URL скопійовано в буфер обміну
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+  polish:
+    urlInput: Adres URL YouTube lub innej obsługiwanej usługi
+    statusTitle: Status
+    startButton: Początek
+    statusReady: Gotowy
+    abortAllButton: Anuluj wszystko
+    updateBinButton: Zaktualizuj plik binarny yt-dlp
+    darkThemeButton: Ciemny motyw
+    lightThemeButton: Światło motyw
+    settingsAnchor: Ustawienia
+    serverAddressTitle: Adres serwera
+    serverPortTitle: Port
+    extractAudioCheckbox: Wyodrębnij dźwięk
+    noMTimeCheckbox: Nie ustawiaj czasu modyfikacji pliku
+    bgReminder: Po zamknięciu tej strony pobieranie będzie kontynuowane w tle. 
+    toastConnected: 'Połączony z '
+    toastUpdated: Zaktualizowano plik binarny yt-dlp!
+    formatSelectionEnabler: Aktywuj wybór formatów wideo/audio
+    themeSelect: 'Motyw'
+    languageSelect: 'Język'
+    overridesAnchor: Przedefiniuj
+    pathOverrideOption: Aktywuj zastąpienie ścieżki źródłowej
+    filenameOverrideOption: Aktywuj zastępowanie nazwy pliku źródłowego
+    customFilename: Wprowadź nazwę pliku (pozostaw puste, aby użyć nazwy domyślnej)
+    customPath: Ustaw ścieżkę
+    customArgs: Uwzględnij konfigurowalne argumenty yt-dlp (wielka moc = wielka odpowiedzialność)
+    customArgsInput: Niestandardowe argumenty yt-dlp
+    rpcConnErr: Wystąpił błąd podczas łączenia z serwerem RPC
+    splashText: Brak aktywnych pobrań
+    archiveTitle: Archiwum
+    clipboardAction: Adres URL zostanie skopiowany do schowka
+    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content

frontend/src/atoms/downloadTemplate.ts

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

frontend/src/atoms/downloads.ts

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

frontend/src/atoms/format.ts

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

frontend/src/atoms/i18n.ts

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

frontend/src/atoms/rpc.ts

@@ -0,0 +1,12 @@
+import { selector } from 'recoil'
+import { RPCClient } from '../lib/rpcClient'
+import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
+
+export const rpcClientState = selector({
+  key: 'rpcClientState',
+  get: ({ get }) =>
+    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+  set: ({ get }) =>
+    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+  dangerouslyAllowMutability: true,
+})

frontend/src/atoms/settings.ts

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

frontend/src/atoms/status.ts

@@ -0,0 +1,40 @@
+import { atom, selector } from 'recoil'
+import { rpcClientState } from './rpc'
+
+type StatusState = {
+  connected: boolean,
+  updated: boolean,
+  downloading: boolean,
+}
+
+
+export const connectedState = atom({
+  key: 'connectedState',
+  default: false
+})
+
+export const updatedBinaryState = atom({
+  key: 'updatedBinaryState',
+  default: false
+})
+
+export const isDownloadingState = atom({
+  key: 'isDownloadingState',
+  default: false
+})
+
+// export const freeSpaceBytesState = selector({
+//   key: 'freeSpaceBytesState',
+//   get: async ({ get }) => {
+//     const res = await get(rpcClientState).freeSpace()
+//     return res.result
+//   }
+// })
+
+export const availableDownloadPathsState = selector({
+  key: 'availableDownloadPathsState',
+  get: async ({ get }) => {
+    const res = await get(rpcClientState).directoryTree()
+    return res.result
+  }
+})

frontend/src/atoms/toast.ts

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

frontend/src/atoms/ui.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const loadingAtom = atom({
+  key: 'loadingAtom',
+  default: true
+})

frontend/src/components/ArchiveResult.tsx

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

frontend/src/components/CookiesTextField.tsx

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

frontend/src/components/DownloadCard.tsx

@@ -0,0 +1,110 @@
+import EightK from '@mui/icons-material/EightK'
+import FourK from '@mui/icons-material/FourK'
+import Hd from '@mui/icons-material/Hd'
+import Sd from '@mui/icons-material/Sd'
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Chip,
+  LinearProgress,
+  Skeleton,
+  Stack,
+  Typography
+} from '@mui/material'
+import { RPCResult } from '../types'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
+
+type Props = {
+  download: RPCResult
+  onStop: () => void
+  onCopy: () => void
+}
+
+const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
+  if (!resolution) return null
+  if (resolution.includes('4320')) return <EightK color="primary" />
+  if (resolution.includes('2160')) return <FourK color="primary" />
+  if (resolution.includes('1080')) return <Hd color="primary" />
+  if (resolution.includes('720')) return <Sd color="primary" />
+  return null
+}
+
+const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
+  const isCompleted = () => download.progress.percentage === '-1'
+
+  const percentageToNumber = () => isCompleted()
+    ? 100
+    : Number(download.progress.percentage.replace('%', ''))
+
+  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} />
+        }
+        <CardContent>
+          {download.info.title !== '' ?
+            <Typography gutterBottom variant="h6" component="div">
+              {ellipsis(download.info.title, 54)}
+            </Typography> :
+            <Skeleton />
+          }
+          <Stack direction="row" spacing={1} py={2}>
+            <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>
+              {roundMiB(download.info.filesize_approx ?? 0)}
+            </Typography>
+            <Resolution resolution={download.info.resolution} />
+          </Stack>
+          {download.progress.percentage ?
+            <LinearProgress
+              variant="determinate"
+              value={percentageToNumber()}
+              color={isCompleted() ? "secondary" : "primary"}
+            /> :
+            null
+          }
+        </CardContent>
+      </CardActionArea>
+      <CardActions>
+        <Button
+          variant="contained"
+          size="small"
+          color="primary"
+          onClick={onStop}
+        >
+          {isCompleted() ? "Clear" : "Stop"}
+        </Button>
+      </CardActions>
+    </Card>
+  )
+}
+
+export default DownloadCard

frontend/src/components/DownloadDialog.tsx

@@ -1,35 +1,44 @@
 import { FileUpload } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import {
+  Autocomplete,
+  Backdrop,
+  Box,
   Button,
+  Checkbox,
   Container,
   FormControl,
+  FormControlLabel,
   Grid,
   IconButton,
   InputAdornment,
-  InputLabel,
-  MenuItem,
   Paper,
-  Select,
-  styled,
   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 { TransitionProps } from '@mui/material/transitions'
 import Typography from '@mui/material/Typography'
-import { Buffer } from 'buffer'
+import { TransitionProps } from '@mui/material/transitions'
-import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'
+import {
-import { useDispatch, useSelector } from 'react-redux'
+  forwardRef,
+  useMemo,
+  useRef,
+  useState,
+  useTransition
+} from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
+import { settingsState } from '../atoms/settings'
+import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
 import { CliArguments } from '../lib/argsParser'
-import I18nBuilder from '../lib/intl'
-import { RPCClient } from '../lib/rpcClient'
-import { RootState } from '../stores/store'
 import type { DLMetadata } from '../types'
 import { isValidURL, toFormatArgs } from '../utils'
+import ExtraDownloadOptions from './ExtraDownloadOptions'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -43,50 +52,47 @@ const Transition = forwardRef(function Transition(
 type Props = {
   open: boolean
   onClose: () => void
+  onDownloadStart: (url: string) => void
 }
 
-export default function DownloadDialog({ open, onClose }: Props) {
+export default function DownloadDialog({
-  // redux state
+  open,
-  const settings = useSelector((state: RootState) => state.settings)
+  onClose,
-  const status = useSelector((state: RootState) => state.status)
+  onDownloadStart
-  const dispatch = useDispatch()
+}: Props) {
+  const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
+  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+  const downloadTemplate = useRecoilValue(downloadTemplateState)
 
-  // ephemeral state
   const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
   const [pickedVideoFormat, setPickedVideoFormat] = useState('')
   const [pickedAudioFormat, setPickedAudioFormat] = useState('')
   const [pickedBestFormat, setPickedBestFormat] = useState('')
 
-  const [customArgs, setCustomArgs] = useState('')
+  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
-  const [downloadPath, setDownloadPath] = useState(0)
+  const [downloadPath, setDownloadPath] = useState('')
-  const [availableDownloadPaths, setAvailableDownloadPaths] = useState<string[]>([])
 
-  const [fileNameOverride, setFilenameOverride] = useState('')
+  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
+    filenameTemplateState
+  )
 
   const [url, setUrl] = useState('')
   const [workingUrl, setWorkingUrl] = useState('')
 
-  // memos
+  const [isPlaylist, setIsPlaylist] = useState(false)
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
+
-  const client = useMemo(() => new RPCClient(), [settings.serverAddr, settings.serverPort])
+  const cliArgs = useMemo(() =>
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [settings.cliArgs])
+    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
+  )
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
 
-  // refs
   const urlInputRef = useRef<HTMLInputElement>(null)
   const customFilenameInputRef = useRef<HTMLInputElement>(null)
 
-  // effects
+  const [isPending, startTransition] = useTransition()
-  useEffect(() => {
-    client.directoryTree()
-      .then(data => {
-        setAvailableDownloadPaths(data.result)
-      })
-  }, [])
-
-  useEffect(() => {
-    setCustomArgs(localStorage.getItem('last-input-args') ?? '')
-    setFilenameOverride(localStorage.getItem('last-filename-override') ?? '')
-  }, [])
 
   /**
     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
@@ -97,12 +103,13 @@ export default function DownloadDialog({ open, onClose }: Props) {
     if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
     if (pickedBestFormat !== '') codes.push(pickedBestFormat)
 
-    client.download(
+    client.download({
-      immediate || url || workingUrl,
+      url: immediate || url || workingUrl,
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
+      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
-      availableDownloadPaths[downloadPath] ?? '',
+      pathOverride: downloadPath ?? '',
-      fileNameOverride
+      renameTo: settings.fileRenaming ? filenameTemplate : '',
-    )
+      playlist: isPlaylist,
+    })
 
     setUrl('')
     setWorkingUrl('')
@@ -110,7 +117,7 @@ export default function DownloadDialog({ open, onClose }: Props) {
     setTimeout(() => {
       resetInput()
       setDownloadFormats(undefined)
-      onClose()
+      onDownloadStart(url)
     }, 250)
   }
 
@@ -131,45 +138,30 @@ export default function DownloadDialog({ open, onClose }: Props) {
       })
   }
 
-  /**
-   * Update the url state whenever the input value changes
-   * @param e Input change event
-   */
   const handleUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setUrl(e.target.value)
   }
 
-  /**
+  const handleFilenameTemplateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-   * Update the filename override state whenever the input value changes
+    setFilenameTemplate(e.target.value)
-   * @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)
   }
 
-  const parseUrlListFile = (event: any) => {
+  const parseUrlListFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const urlList = event.target.files
+    const files = e.currentTarget.files
-    const reader = new FileReader()
+    if (!files || files.length < 1) {
-    reader.addEventListener('load', $event => {
+      return
-      const base64 = $event.target?.result!.toString().split(',')[1]
+    }
-      Buffer.from(base64!, 'base64')
+
-        .toString()
+    const file = await files[0].text()
-        .trimEnd()
+
+    file
       .split('\n')
-        .filter(_url => isValidURL(_url))
+      .filter(u => isValidURL(u))
-        .forEach(_url => sendUrl(_url))
+      .forEach(u => sendUrl(u))
-    })
-    reader.readAsDataURL(urlList[0])
   }
 
   const resetInput = () => {
@@ -179,20 +171,17 @@ export default function DownloadDialog({ open, onClose }: Props) {
     }
   }
 
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  })
-
   return (
-    <div>
     <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
@@ -208,10 +197,15 @@ export default function DownloadDialog({ open, onClose }: Props) {
           </Typography>
         </Toolbar>
       </AppBar>
-        <Container sx={{ mt: 4 }}>
+      <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',
@@ -225,13 +219,26 @@ export default function DownloadDialog({ open, onClose }: Props) {
                     label={i18n.t('urlInput')}
                     variant="outlined"
                     onChange={handleUrlChange}
-                    disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
+                    disabled={
+                      !isConnected
+                      || (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} />
+                            <input
-                            <IconButton color="primary" aria-label="upload file" component="span">
+                              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>
@@ -250,21 +257,28 @@ export default function DownloadDialog({ open, onClose }: Props) {
                         variant="outlined"
                         onChange={handleCustomArgsChange}
                         value={customArgs}
-                        disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
+                        disabled={
+                          !isConnected ||
+                          (settings.formatSelection && downloadFormats != null)
+                        }
                       />
                     </Grid>
                   }
                   {
                     settings.fileRenaming &&
-                    <Grid item xs={8}>
+                    <Grid item xs={settings.pathOverriding ? 8 : 12}>
                       <TextField
+                        sx={{ mt: 1 }}
                         ref={customFilenameInputRef}
                         fullWidth
                         label={i18n.t('customFilename')}
                         variant="outlined"
-                        value={fileNameOverride}
+                        value={filenameTemplate}
-                        onChange={handleFilenameOverrideChange}
+                        onChange={handleFilenameTemplateChange}
-                        disabled={!status.connected || (settings.formatSelection && downloadFormats != null)}
+                        disabled={
+                          !isConnected ||
+                          (settings.formatSelection && downloadFormats != null)
+                        }
                       />
                     </Grid>
                   }
@@ -272,32 +286,54 @@ export default function DownloadDialog({ open, onClose }: Props) {
                     settings.pathOverriding &&
                     <Grid item xs={4}>
                       <FormControl fullWidth>
-                        <InputLabel>{i18n.t('customPath')}</InputLabel>
+                        <Autocomplete
-                        <Select
+                          disablePortal
-                          label={i18n.t('customPath')}
+                          options={availableDownloadPaths.map((dir) => ({ label: dir, dir }))}
-                          defaultValue={0}
+                          autoHighlight
-                          variant={'outlined'}
+                          getOptionLabel={(option) => option.label}
-                          value={downloadPath}
+                          onChange={(_, value) => {
-                          onChange={(e) => setDownloadPath(Number(e.target.value))}
+                            setDownloadPath(value?.dir!)
-                        >
+                          }}
-                          {availableDownloadPaths.map((val: string, idx: number) => (
+                          renderOption={(props, option) => (
-                            <MenuItem key={idx} value={idx}>{val}</MenuItem>
+                            <Box
-                          ))}
+                              component="li"
-                        </Select>
+                              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>
-                <Grid container spacing={1} pt={2}>
+                <ExtraDownloadOptions />
+                <Grid container spacing={1} pt={2} justifyContent="space-between">
                   <Grid item>
                     <Button
                       variant="contained"
                       disabled={url === ''}
-                      onClick={() => settings.formatSelection ? sendUrlFormatSelection() : sendUrl()}
+                      onClick={() => settings.formatSelection
+                        ? startTransition(() => sendUrlFormatSelection())
+                        : sendUrl()
+                      }
                     >
-                      {settings.formatSelection ? i18n.t('selectFormatButton') : i18n.t('startButton')}
+                      {
+                        settings.formatSelection
+                          ? i18n.t('selectFormatButton')
+                          : i18n.t('startButton')
+                      }
                     </Button>
                   </Grid>
+                  <Grid item>
+                    <FormControlLabel
+                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                      checked={isPlaylist}
+                      label={i18n.t('playlistCheckbox')}
+                    />
+                  </Grid>
                 </Grid>
               </Paper>
             </Grid>
@@ -329,7 +365,7 @@ export default function DownloadDialog({ open, onClose }: Props) {
             pickedAudioFormat={pickedAudioFormat}
           />}
         </Container>
+      </Box>
     </Dialog>
-    </div>
   )
 }

frontend/src/components/Downloads.tsx

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

frontend/src/components/DownloadsCardView.tsx

@@ -1,34 +1,37 @@
-import { Grid } from "@mui/material"
+import { Grid } from '@mui/material'
-import { Fragment } from "react"
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import DownloadCard from './DownloadCard'
 
-import type { RPCResult } from "../types"
+const DownloadsCardView: React.FC = () => {
-import { StackableResult } from "./StackableResult"
+  const downloads = useRecoilValue(activeDownloadsState)
 
-type Props = {
+  const { i18n } = useI18n()
-  downloads: RPCResult[]
+  const { client } = useRPC()
-  abortFunction: (id: string) => void
+  const { pushMessage } = useToast()
-}
+
+  const abort = (id: string) => client.kill(id)
 
-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
+              <DownloadCard
-                title={download.info.title}
+                download={download}
-                thumbnail={download.info.thumbnail}
+                onStop={() => abort(download.id)}
-                percentage={download.progress.percentage}
+                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
-                stopCallback={() => abortFunction(download.id)}
-                resolution={download.info.resolution ?? ''}
-                speed={download.progress.speed}
-                size={download.info.filesize_approx ?? 0}
               />
-            </Fragment>
+            </>
           </Grid>
         ))
       }
     </Grid>
   )
 }
+
+export default DownloadsCardView

frontend/src/components/DownloadsListView.tsx

@@ -11,21 +11,25 @@ import {
   TableRow,
   Typography
 } from "@mui/material"
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useRPC } from '../hooks/useRPC'
 import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
-import type { RPCResult } from "../types"
 
-type Props = {
-  downloads: RPCResult[]
-  abortFunction: Function
-}
 
-export function DownloadsListView({ downloads, abortFunction }: Props) {
+const DownloadsListView: React.FC = () => {
+  const downloads = useRecoilValue(activeDownloadsState)
+
+  const { client } = useRPC()
+
+  const abort = (id: string) => client.kill(id)
+
   return (
     <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
       <Grid item xs={12}>
-        <TableContainer component={Paper} sx={{ minHeight: '80vh' }} elevation={2}>
+        <TableContainer component={Paper} sx={{ minHeight: '100%' }} elevation={2}>
           <Table>
-            <TableHead>
+            <TableHead hidden={downloads.length === 0}>
               <TableRow>
                 <TableCell>
                   <Typography fontWeight={500} fontSize={15}>Title</Typography>
@@ -52,10 +56,15 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
                     <TableCell>
                       <LinearProgress
                         value={
-                          download.progress.percentage === '-1' ? 100 :
+                          download.progress.percentage === '-1'
-                            Number(download.progress.percentage.replace('%', ''))
+                            ? 100
+                            : Number(download.progress.percentage.replace('%', ''))
+                        }
+                        variant={
+                          download.progress.process_status === 0
+                            ? 'indeterminate'
+                            : 'determinate'
                         }
-                        variant="determinate"
                         color={download.progress.percentage === '-1' ? 'success' : 'primary'}
                       />
                     </TableCell>
@@ -65,7 +74,7 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
                       <Button
                         variant="contained"
                         size="small"
-                        onClick={() => abortFunction(download.id)}
+                        onClick={() => abort(download.id)}
                       >
                         {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
                       </Button>
@@ -80,3 +89,5 @@ export function DownloadsListView({ downloads, abortFunction }: Props) {
     </Grid>
   )
 }
+
+export default DownloadsListView

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 authentication 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,37 @@
+import { Autocomplete, Box, TextField, Typography } from '@mui/material'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { useI18n } from '../hooks/useI18n'
+
+const ExtraDownloadOptions: React.FC = () => {
+  const { i18n } = useI18n()
+
+  const customTemplates = useRecoilValue(savedTemplatesState)
+  const [, setCustomArgs] = useRecoilState(customArgsState)
+
+  return (
+    <>
+      <Autocomplete
+        disablePortal
+        options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
+        autoHighlight
+        getOptionLabel={(option) => option.label}
+        onChange={(_, value) => {
+          setCustomArgs(value?.content!)
+        }}
+        renderOption={(props, option) => (
+          <Box
+            component="li"
+            sx={{ mr: 2, flexShrink: 0 }}
+            {...props}>
+            {option.label}
+          </Box>
+        )}
+        sx={{ width: '100%', mt: 2 }}
+        renderInput={(params) => <TextField {...params} label={i18n.t('savedTemplates')} />}
+      />
+    </>
+  )
+}
+
+export default ExtraDownloadOptions

frontend/src/components/FreeSpaceIndicator.tsx

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

frontend/src/components/HomeActions.tsx

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

frontend/src/components/HomeSpeedDial.tsx

@@ -0,0 +1,58 @@
+import AddCircleIcon from '@mui/icons-material/AddCircle'
+import BuildCircleIcon from '@mui/icons-material/BuildCircle'
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
+import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
+import {
+  SpeedDial,
+  SpeedDialAction,
+  SpeedDialIcon
+} from '@mui/material'
+import { useRecoilState } from 'recoil'
+import { listViewState } 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 [, setListView] = useRecoilState(listViewState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+
+  const abort = () => client.killAll()
+
+  return (
+    <SpeedDial
+      ariaLabel="Home speed dial"
+      sx={{ position: 'absolute', bottom: 32, right: 32 }}
+      icon={<SpeedDialIcon />}
+    >
+      <SpeedDialAction
+        icon={<FormatListBulleted />}
+        tooltipTitle={`Table view`}
+        onClick={() => setListView(state => !state)}
+      />
+      <SpeedDialAction
+        icon={<DeleteForeverIcon />}
+        tooltipTitle={i18n.t('abortAllButton')}
+        onClick={abort}
+      />
+      <SpeedDialAction
+        icon={<BuildCircleIcon />}
+        tooltipTitle={i18n.t('templatesEditor')}
+        onClick={onEditorOpen}
+      />
+      <SpeedDialAction
+        icon={<AddCircleIcon />}
+        tooltipTitle={i18n.t('newDownload')}
+        onClick={onDownloadOpen}
+      />
+    </SpeedDial>
+  )
+}
+
+export default HomeSpeedDial

frontend/src/components/LoadingBackdrop.tsx

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

frontend/src/components/Logout.tsx

@@ -1,13 +1,15 @@
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import LogoutIcon from '@mui/icons-material/Logout'
-import { getHttpEndpoint } from '../utils'
 import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
 
 export default function Logout() {
   const navigate = useNavigate()
+  const url = useRecoilValue(serverURL)
 
   const logout = async () => {
-    const res = await fetch(`${getHttpEndpoint()}/auth/logout`)
+    const res = await fetch(`${url}/auth/logout`)
     if (res.ok) {
       navigate('/login')
     }

frontend/src/components/SocketSubscriber.tsx

@@ -0,0 +1,76 @@
+import * as O from 'fp-ts/Option'
+import { useEffect, useMemo } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { share, take, timer } from 'rxjs'
+import { downloadsState } from '../atoms/downloads'
+import { serverAddressAndPortState } from '../atoms/settings'
+import { connectedState } from '../atoms/status'
+import { useSubscription } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { datetimeCompareFunc, isRPCResponse } from '../utils'
+
+interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
+
+const SocketSubscriber: React.FC<Props> = ({ children }) => {
+  const [connected, setIsConnected] = useRecoilState(connectedState)
+  const [, setDownloads] = useRecoilState(downloadsState)
+
+  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
+
+  const { i18n } = useI18n()
+  const { client } = useRPC()
+  const { pushMessage } = useToast()
+
+  const sharedSocket$ = useMemo(() => client.socket$.pipe(share()), [])
+  const socketOnce$ = useMemo(() => sharedSocket$.pipe(take(1)), [])
+
+  useSubscription(socketOnce$, () => {
+    setIsConnected(true)
+    pushMessage(
+      `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
+      "success"
+    )
+  })
+
+  useSubscription(
+    sharedSocket$,
+    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"
+      )
+    }
+  )
+
+  useEffect(() => {
+    if (connected) {
+      timer(0, 1000).subscribe(() => client.running())
+    }
+  }, [connected])
+
+  return (
+    <>{children}</>
+  )
+}
+
+export default SocketSubscriber

frontend/src/components/Splash.tsx

@@ -1,5 +1,8 @@
 import CloudDownloadIcon from '@mui/icons-material/CloudDownload'
 import { Container, SvgIcon, Typography, styled } from '@mui/material'
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useI18n } from '../hooks/useI18n'
 
 const FlexContainer = styled(Container)({
   display: 'flex',
@@ -19,6 +22,13 @@ const Title = styled(Typography)({
 })
 
 export default function Splash() {
+  const { i18n } = useI18n()
+  const activeDownloads = useRecoilValue(activeDownloadsState)
+
+  if (!activeDownloads || activeDownloads.length !== 0) {
+    return null
+  }
+
   return (
     <FlexContainer>
       <Title fontWeight={'500'} fontSize={72} color={'gray'}>
@@ -27,7 +37,7 @@ export default function Splash() {
         </SvgIcon>
       </Title>
       <Title fontWeight={'500'} fontSize={36} color={'gray'}>
-        No active downloads
+        {i18n.t('splashText')}
       </Title>
     </FlexContainer>
   )

frontend/src/components/StackableResult.tsx

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

frontend/src/components/TemplatesEditor.tsx

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

frontend/src/components/ThemeToggler.tsx

@@ -1,27 +1,32 @@
+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 { useDispatch, useSelector } from 'react-redux'
+import { useRecoilState } from 'recoil'
-import { setTheme } from '../features/settings/settingsSlice'
+import { Theme, themeState } from '../atoms/settings'
-import { RootState } from '../stores/store'
-import { Brightness4, Brightness5 } from '@mui/icons-material'
 
-export default function ThemeToggler() {
+const ThemeToggler: React.FC = () => {
-  const settings = useSelector((state: RootState) => state.settings)
+  const [theme, setTheme] = useRecoilState(themeState)
-  const dispatch = useDispatch()
+
+  const actions: Record<Theme, React.ReactNode> = {
+    system: <BrightnessAuto />,
+    light: <Brightness4 />,
+    dark: <Brightness5 />,
+  }
+
+  const themes: Theme[] = ['system', 'light', 'dark']
+  const currentTheme = themes.indexOf(theme)
 
   return (
     <ListItemButton onClick={() => {
-      settings.theme === 'light'
+      setTheme(themes[(currentTheme + 1) % themes.length])
-        ? dispatch(setTheme('dark'))
-        : dispatch(setTheme('light'))
     }}>
       <ListItemIcon>
-        {
+        {actions[theme]}
-          settings.theme === 'light'
-            ? <Brightness4 />
-            : <Brightness5 />
-        }
       </ListItemIcon>
       <ListItemText primary="Toggle theme" />
     </ListItemButton>
   )
 }
+
+export default ThemeToggler

frontend/src/features/formatSelection/formatSelectionSlice.ts

@@ -1,7 +0,0 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit'
-
-export interface FormatSelectionState {
-  bestFormat: string
-  audioFormat: string
-  videoFormat: string
-}

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

frontend/src/features/status/statusSlice.ts

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

frontend/src/hooks/toast.ts

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

frontend/src/hooks/useI18n.ts

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

frontend/src/hooks/useRPC.ts

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

frontend/src/index.tsx

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

frontend/src/lib/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/lib/httpClient.ts

@@ -1,21 +1,22 @@
-import * as E from 'fp-ts/Either'
+import { tryCatch } from 'fp-ts/TaskEither'
-import { pipe } from 'fp-ts/function'
 
-type FetchInit = {
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
-  url: string,
+  () => fetcher<T>(url, opt),
-  opt?: RequestInit
+  (e) => `error while fetching: ${e}`
-}
+)
 
-export async function ffetch<T>(
+
-  url: string,
+const fetcher = async <T>(url: string, opt?: RequestInit) => {
-  onSuccess: (res: T) => void,
-  onError: (err: string) => void,
-  opt?: RequestInit,
-) {
   const res = await fetch(url, opt)
-  if (!res.ok) {
+
-    onError(await res.text())
+  if (opt && !opt.headers) {
-    return
+    opt.headers = {
+      'Content-Type': 'application/json',
     }
-  onSuccess(await res.json() as T)
+  }
+
+  if (!res.ok) {
+    throw await res.text()
+  }
+  return res.json() as T
 }

frontend/src/lib/rpcClient.ts

@@ -1,15 +1,29 @@
-import type { DLMetadata, RPCRequest, RPCResponse } from '../types'
+import { Observable } from 'rxjs'
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from '../types'
 
-import { webSocket } from 'rxjs/webSocket'
+import { WebSocketSubject, webSocket } from 'rxjs/webSocket'
-import { getHttpRPCEndpoint, getWebSocketEndpoint } from '../utils'
 
-export const socket$ = webSocket<any>(getWebSocketEndpoint())
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
 
 export class RPCClient {
   private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocketSubject<any>
 
-  constructor() {
+  constructor(httpEndpoint: string, webSocketEndpoint: string) {
     this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this._socket$ = webSocket<any>(webSocketEndpoint)
+  }
+
+  public get socket$(): Observable<RPCResponse<RPCResult[]>> {
+    return this._socket$.asObservable()
   }
 
   private incrementSeq() {
@@ -17,14 +31,21 @@ export class RPCClient {
   }
 
   private send(req: RPCRequest) {
-    socket$.next({
+    this._socket$.next({
       ...req,
       id: this.incrementSeq(),
     })
   }
 
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
   private async sendHTTP<T>(req: RPCRequest) {
-    const res = await fetch(getHttpRPCEndpoint(), {
+    const res = await fetch(this.httpEndpoint, {
       method: 'POST',
       body: JSON.stringify({
         ...req,
@@ -36,18 +57,47 @@ export class RPCClient {
     return data
   }
 
-  public download(url: string, args: string, pathOverride = '', renameTo = '') {
+  public download(req: DownloadRequestArgs) {
-    if (url) {
+    if (!req.url) {
-      this.send({
+      return
-        method: 'Service.Exec',
+    }
+
+    const rename = req.args.includes('-o')
+      ? req.args
+        .substring(req.args.indexOf('-o'))
+        .replaceAll("'", '')
+        .replaceAll('"', '')
+        .split('-o')
+        .map(s => s.trim())
+        .join('')
+        .split(' ')
+        .at(0) ?? ''
+      : ''
+
+    const sanitizedArgs = this.argsSanitizer(
+      req.args.replace('-o', '').replace(rename, '')
+    )
+
+    if (req.playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
         params: [{
-          URL: url.split("?list").at(0)!,
+          URL: req.url,
-          Params: args.split(" ").map(a => a.trim()),
+          Params: sanitizedArgs,
-          Path: pathOverride,
+          Path: req.pathOverride,
-          Rename: renameTo,
+          Rename: req.renameTo || rename,
         }]
       })
     }
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
+      }]
+    })
   }
 
   public formats(url: string) {
@@ -55,7 +105,7 @@ export class RPCClient {
       return this.sendHTTP<DLMetadata>({
         method: 'Service.Formats',
         params: [{
-          URL: url.split("?list").at(0)!,
+          URL: url.split('?list').at(0)!,
         }]
       })
     }
@@ -69,14 +119,14 @@ export class RPCClient {
   }
 
   public kill(id: string) {
-    this.send({
+    this.sendHTTP({
       method: 'Service.Kill',
       params: [id],
     })
   }
 
   public killAll() {
-    this.send({
+    this.sendHTTP({
       method: 'Service.KillAll',
       params: [],
     })

frontend/src/providers/ToasterProvider.tsx

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

frontend/src/router.tsx

@@ -1,6 +1,6 @@
 import { CircularProgress } from '@mui/material'
 import { Suspense, lazy } from 'react'
-import { createBrowserRouter } from 'react-router-dom'
+import { createHashRouter } from 'react-router-dom'
 import Layout from './Layout'
 
 const Home = lazy(() => import('./views/Home'))
@@ -8,7 +8,9 @@ const Login = lazy(() => import('./views/Login'))
 const Archive = lazy(() => import('./views/Archive'))
 const Settings = lazy(() => import('./views/Settings'))
 
-export const router = createBrowserRouter([
+const ErrorBoundary = lazy(() => import('./components/ErrorBoundary'))
+
+export const router = createHashRouter([
   {
     path: '/',
     Component: () => <Layout />,
@@ -19,6 +21,11 @@ export const router = createBrowserRouter([
           <Suspense fallback={<CircularProgress />}>
             <Home />
           </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
         )
       },
       {
@@ -35,6 +42,11 @@ export const router = createBrowserRouter([
           <Suspense fallback={<CircularProgress />}>
             <Archive />
           </Suspense >
+        ),
+        errorElement: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
         )
       },
       {

frontend/src/stores/store.ts

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

frontend/src/types/index.ts

@@ -6,6 +6,7 @@ export type RPCMethods =
   | "Service.KillAll"
   | "Service.FreeSpace"
   | "Service.Formats"
+  | "Service.ExecPlaylist"
   | "Service.DirectoryTree"
   | "Service.UpdateExecutable"
 
@@ -15,11 +16,11 @@ export type RPCRequest = {
   id?: string
 }
 
-export type RPCResponse<T> = {
+export type RPCResponse<T> = Readonly<{
   result: T
   error: number | null
   id?: string
-}
+}>
 
 type DownloadInfo = {
   url: string
@@ -37,20 +38,21 @@ type DownloadProgress = {
   speed: number
   eta: number
   percentage: string
+  process_status: number
 }
 
-export type RPCResult = {
+export type RPCResult = Readonly<{
   id: string
   progress: DownloadProgress
   info: DownloadInfo
-}
+}>
 
 export type RPCParams = {
   URL: string
   Params?: string
 }
 
-export interface DLMetadata {
+export type DLMetadata = {
   formats: Array<DLFormat>
   best: DLFormat
   thumbnail: string
@@ -81,3 +83,8 @@ export type DeleteRequest = Pick<DirectoryEntry, 'path' | 'shaSum'>
 
 export type PlayRequest = Pick<DirectoryEntry, 'path'>
 
+export type CustomTemplate = {
+  id: string
+  name: string
+  content: string
+}

frontend/src/utils.ts

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

frontend/src/views/Archive.tsx

@@ -26,45 +26,52 @@ import FolderIcon from '@mui/icons-material/Folder'
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'
 
-import { Buffer } from 'buffer'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
 import { useEffect, useMemo, useState, useTransition } from 'react'
-import { useSelector } from 'react-redux'
-import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
-import { useObservable } from '../hooks/observable'
-import { RootState } from '../stores/store'
-import { DeleteRequest, DirectoryEntry } from '../types'
-import { roundMiB } from '../utils'
 import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
+import { serverURL } from '../atoms/settings'
+import { useObservable } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
+import { DeleteRequest, DirectoryEntry } from '../types'
+import { base64URLEncode, roundMiB } from '../utils'
 
 export default function Downloaded() {
-  const settings = useSelector((state: RootState) => state.settings)
+  const serverAddr = useRecoilValue(serverURL)
   const navigate = useNavigate()
 
-  const [openDialog, setOpenDialog] = useState(false)
+  const { i18n } = useI18n()
+  const { pushMessage } = useToast()
 
-  const serverAddr =
+  const [openDialog, setOpenDialog] = useState(false)
-    `${window.location.protocol}//${settings.serverAddr}:${settings.serverPort}`
 
   const files$ = useMemo(() => new Subject<DirectoryEntry[]>(), [])
   const selected$ = useMemo(() => new BehaviorSubject<string[]>([]), [])
 
   const [isPending, startTransition] = useTransition()
 
-  const fetcher = () => ffetch<DirectoryEntry[]>(
+  const fetcher = () => pipe(
+    ffetch<DirectoryEntry[]>(
       `${serverAddr}/archive/downloaded`,
-    (d) => files$.next(d),
-    () => navigate('/login'),
       {
         method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
         body: JSON.stringify({
           subdir: '',
         })
       }
+    ),
+    matchW(
+      (e) => {
+        pushMessage(e, 'error')
+        navigate('/login')
+      },
+      (d) => files$.next(d),
     )
+  )()
 
   const fetcherSubfolder = (sub: string) => {
     const folders = sub.startsWith('/')
@@ -80,24 +87,32 @@ export default function Downloaded() {
       ? ['.', ..._upperLevel].join('/')
       : _upperLevel.join('/')
 
-    fetch(`${serverAddr}/archive/downloaded`, {
+    const task = ffetch<DirectoryEntry[]>(`${serverAddr}/archive/downloaded`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({ subdir: relpath })
     })
-      .then(res => res.json())
+
-      .then(data => {
+    pipe(
-        files$.next(sub
+      task,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        (r) => files$.next(sub
           ? [{
-            name: '..',
             isDirectory: true,
+            isVideo: false,
+            modTime: '',
+            name: '..',
             path: upperLevel,
-          }, ...data]
+            shaSum: '',
-          : data
+            size: 0,
+          }, ...r]
+          : r
         )
-      })
+      )
+    )()
   }
 
   const selectable$ = useMemo(() => files$.pipe(
@@ -135,11 +150,12 @@ export default function Downloaded() {
 
   useEffect(() => {
     fetcher()
-  }, [settings.serverAddr, settings.serverPort])
+  }, [serverAddr])
-
 
   const onFileClick = (path: string) => startTransition(() => {
-    window.open(`${serverAddr}/archive/d/${Buffer.from(path).toString('hex')}`)
+    const encoded = base64URLEncode(path)
+
+    window.open(`${serverAddr}/archive/d/${encoded}`)
   })
 
   const onFolderClick = (path: string) => startTransition(() => {
@@ -160,7 +176,7 @@ export default function Downloaded() {
         flexDirection: 'column',
       }}>
         <Typography py={1} variant="h5" color="primary">
-          {'Archive'}
+          {i18n.t('archiveTitle')}
         </Typography>
         <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
           {selectable.length === 0 && 'No files found'}

frontend/src/views/Home.tsx

@@ -1,189 +1,18 @@
-import AddCircleIcon from '@mui/icons-material/AddCircle'
-import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
-import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
 import {
-  Alert,
+  Container
-  Backdrop,
-  CircularProgress,
-  Container,
-  Snackbar,
-  SpeedDial,
-  SpeedDialAction,
-  SpeedDialIcon,
-  styled
 } from '@mui/material'
-import { useEffect, useMemo, useState } from 'react'
+import Downloads from '../components/Downloads'
-import { useDispatch, useSelector } from 'react-redux'
+import HomeActions from '../components/HomeActions'
-import DownloadDialog from '../components/DownloadDialog'
+import LoadingBackdrop from '../components/LoadingBackdrop'
-import { DownloadsCardView } from '../components/DownloadsCardView'
-import { DownloadsListView } from '../components/DownloadsListView'
 import Splash from '../components/Splash'
-import { toggleListView } from '../features/settings/settingsSlice'
-import { connected, setFreeSpace } from '../features/status/statusSlice'
-import I18nBuilder from '../lib/intl'
-import { RPCClient, socket$ } from '../lib/rpcClient'
-import { RootState } from '../stores/store'
-import type { RPCResponse, RPCResult } from '../types'
-import { dateTimeComparatorFunc } from '../utils'
 
 export default function Home() {
-  // redux state
-  const settings = useSelector((state: RootState) => state.settings)
-  const status = useSelector((state: RootState) => state.status)
-  const dispatch = useDispatch()
-
-  // ephemeral state
-  const [activeDownloads, setActiveDownloads] = useState<RPCResult[]>()
-
-  const [showBackdrop, setShowBackdrop] = useState(true)
-  const [showToast, setShowToast] = useState(true)
-
-  const [openDialog, setOpenDialog] = useState(false)
-  const [socketHasError, setSocketHasError] = useState(false)
-
-  // memos
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
-  const client = useMemo(() => new RPCClient(), [settings.serverAddr, settings.serverPort])
-
-  /* -------------------- Effects -------------------- */
-
-  /* WebSocket connect event handler*/
-  useEffect(() => {
-    if (status.connected) { return }
-
-    const sub = socket$.subscribe({
-      next: () => {
-        dispatch(connected())
-      },
-      error: () => {
-        setSocketHasError(true)
-        setShowBackdrop(false)
-      },
-      complete: () => {
-        setSocketHasError(true)
-        setShowBackdrop(false)
-      },
-    })
-    return () => sub.unsubscribe()
-  }, [socket$, status.connected])
-
-  useEffect(() => {
-    if (status.connected) {
-      client.running()
-      const interval = setInterval(() => client.running(), 1000)
-      return () => clearInterval(interval)
-    }
-  }, [status.connected])
-
-  useEffect(() => {
-    client.freeSpace().then(bytes => dispatch(setFreeSpace(bytes.result)))
-  }, [])
-
-  useEffect(() => {
-    if (!status.connected) { return }
-
-    const sub = socket$.subscribe((event: RPCResponse<RPCResult[]>) => {
-      switch (typeof event.result) {
-        case 'object':
-          setActiveDownloads(
-            (event.result ?? [])
-              .filter((r) => !!r.info.url)
-              .sort((a, b) => dateTimeComparatorFunc(
-                b.info.created_at,
-                a.info.created_at,
-              ))
-          )
-          break
-        default:
-          break
-      }
-    })
-    return () => sub.unsubscribe()
-  }, [socket$, status.connected])
-
-  useEffect(() => {
-    if (activeDownloads && activeDownloads.length >= 0) {
-      setShowBackdrop(false)
-    }
-  }, [activeDownloads?.length])
-
-  /**
-   * 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()
-  }
-
-
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  })
-
   return (
     <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-      <Backdrop
+      <LoadingBackdrop />
-        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-        open={showBackdrop}
-      >
-        <CircularProgress color="primary" />
-      </Backdrop>
-      {activeDownloads?.length === 0 &&
       <Splash />
-      }
+      <Downloads />
-      {
+      <HomeActions />
-        settings.listView ?
-          <DownloadsListView downloads={activeDownloads ?? []} abortFunction={abort} /> :
-          <DownloadsCardView downloads={activeDownloads ?? []} abortFunction={abort} />
-      }
-      <Snackbar
-        open={showToast === status.connected}
-        autoHideDuration={1500}
-        onClose={() => setShowToast(false)}
-      >
-        <Alert variant="filled" severity="success">
-          {`Connected to (${settings.serverAddr}:${settings.serverPort})`}
-        </Alert>
-      </Snackbar>
-      <Snackbar open={socketHasError}>
-        <Alert variant="filled" severity="error">
-          {`${i18n.t('rpcConnErr')} (${settings.serverAddr}:${settings.serverPort})`}
-        </Alert>
-      </Snackbar>
-      <SpeedDial
-        ariaLabel="SpeedDial basic example"
-        sx={{ position: 'absolute', bottom: 32, right: 32 }}
-        icon={<SpeedDialIcon />}
-      >
-        <SpeedDialAction
-          icon={<FormatListBulleted />}
-          tooltipTitle={`Table view`}
-          onClick={() => dispatch(toggleListView())}
-        />
-        <SpeedDialAction
-          icon={<DeleteForeverIcon />}
-          tooltipTitle={i18n.t('abortAllButton')}
-          onClick={() => abort()}
-        />
-        <SpeedDialAction
-          icon={<AddCircleIcon />}
-          tooltipTitle={`New download`}
-          onClick={() => setOpenDialog(true)}
-        />
-      </SpeedDial>
-      <DownloadDialog open={openDialog} onClose={() => {
-        setOpenDialog(false)
-        activeDownloads?.length === 0
-          ? setShowBackdrop(false)
-          : setShowBackdrop(true)
-      }} />
     </Container>
   )
 }

frontend/src/views/Login.tsx

@@ -11,14 +11,19 @@ import {
   TextField,
   Typography
 } from '@mui/material'
-import { getHttpEndpoint } from '../utils'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
+import { useToast } from '../hooks/toast'
+import { ffetch } from '../lib/httpClient'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
 
 const LoginContainer = styled(Container)({
   display: 'flex',
   minWidth: '100%',
-  minHeight: '100vh',
+  minHeight: '85vh',
   alignItems: 'center',
   justifyContent: 'center',
 })
@@ -32,20 +37,45 @@ const Title = styled(Typography)({
 })
 
 export default function Login() {
-  const [secret, setSecret] = useState('')
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
   const [formHasError, setFormHasError] = useState(false)
 
+  const url = useRecoilValue(serverURL)
+
   const navigate = useNavigate()
 
+  const { pushMessage } = useToast()
+
+  const navigateAndReload = () => {
+    navigate('/')
+    window.location.reload()
+  }
+
   const login = async () => {
-    const res = await fetch(`${getHttpEndpoint()}/auth/login`, {
+    const task = ffetch(`${url}/auth/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify({ secret })
+      body: JSON.stringify({
+        username,
+        password,
+      }),
+      redirect: 'follow'
     })
-    res.ok ? navigate('/') : setFormHasError(true)
+
+    pipe(
+      task,
+      matchW(
+        (l) => {
+          setFormHasError(true)
+          pushMessage(l, 'error')
+        },
+        () => navigateAndReload()
+      )
+    )()
   }
 
   return (
@@ -59,17 +89,23 @@ export default function Login() {
             Authentication token will expire after 30 days.
           </Title>
           <Title fontWeight={'500'} fontSize={16} color={'gray'}>
-            In order to enable RPC authentication append the --auth
+            In order to enable RPC authentication append the --auth,
             <br />
-            and --secret [secret] flags.
+            --user [username] and --pass [password] flags.
           </Title>
           <TextField
-            id="outlined-password-input"
+            label="Username"
-            label="RPC secret"
+            type="text"
-            type="password"
+            autoComplete="yt-dlp-webui-username"
-            autoComplete="current-password"
             error={formHasError}
-            onChange={e => setSecret(e.currentTarget.value)}
+            onChange={e => setUsername(e.currentTarget.value)}
+          />
+          <TextField
+            label="Password"
+            type="password"
+            autoComplete="yt-dlp-webui-password"
+            error={formHasError}
+            onChange={e => setPassword(e.currentTarget.value)}
           />
           <Button variant="contained" size="large" onClick={() => login()}>
             Submit

frontend/src/views/Settings.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Checkbox,
   Container,
   FormControl,
   FormControlLabel,
@@ -11,14 +12,14 @@ import {
   Paper,
   Select,
   SelectChangeEvent,
-  Snackbar,
   Stack,
   Switch,
   TextField,
-  Typography
+  Typography,
+  capitalize
 } from '@mui/material'
 import { useEffect, useMemo, useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useRecoilState } from 'recoil'
 import {
   Subject,
   debounceTime,
@@ -26,38 +27,51 @@ import {
   map,
   takeWhile
 } from 'rxjs'
-import { CliArguments } from '../lib/argsParser'
-import I18nBuilder from '../lib/intl'
-import { RPCClient } from '../lib/rpcClient'
 import {
-  LanguageUnion,
+  Language,
-  ThemeUnion,
+  Theme,
-  setCliArgs,
+  appTitleState,
-  setEnableCustomArgs,
+  enableCustomArgsState,
-  setFileRenaming,
+  fileRenamingState,
-  setFormatSelection,
+  formatSelectionState,
-  setLanguage,
+  languageState,
-  setPathOverriding,
+  languages,
-  setServerAddr,
+  latestCliArgumentsState,
-  setServerPort,
+  pathOverridingState,
-  setTheme
+  servedFromReverseProxyState,
-} from '../features/settings/settingsSlice'
+  serverAddressState,
-import { updated } from '../features/status/statusSlice'
+  serverPortState,
-import { RootState } from '../stores/store'
+  themeState
+} from '../atoms/settings'
+import CookiesTextField from '../components/CookiesTextField'
+import { useToast } from '../hooks/toast'
+import { useI18n } from '../hooks/useI18n'
+import { useRPC } from '../hooks/useRPC'
+import { CliArguments } from '../lib/argsParser'
 import { validateDomain, validateIP } from '../utils'
 
+// NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
 export default function Settings() {
-  const dispatch = useDispatch()
+  const [reverseProxy, setReverseProxy] = useRecoilState(servedFromReverseProxyState)
+  const [formatSelection, setFormatSelection] = useRecoilState(formatSelectionState)
+  const [pathOverriding, setPathOverriding] = useRecoilState(pathOverridingState)
+  const [fileRenaming, setFileRenaming] = useRecoilState(fileRenamingState)
+  const [enableArgs, setEnableArgs] = useRecoilState(enableCustomArgsState)
+  const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
+  const [serverPort, setServerPort] = useRecoilState(serverPortState)
+  const [language, setLanguage] = useRecoilState(languageState)
+  const [appTitle, setApptitle] = useRecoilState(appTitleState)
+  const [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
+  const [theme, setTheme] = useRecoilState(themeState)
 
-  const status = useSelector((state: RootState) => state.status)
+  const [invalidIP, setInvalidIP] = useState(false)
-  const settings = useSelector((state: RootState) => state.settings)
 
-  const [invalidIP, setInvalidIP] = useState(false);
+  const { i18n } = useI18n()
+  const { client } = useRPC()
 
-  const i18n = useMemo(() => new I18nBuilder(settings.language), [settings.language])
+  const { pushMessage } = useToast()
 
-  const client = useMemo(() => new RPCClient(), [])
+  const argsBuilder = useMemo(() => new CliArguments().fromString(cliArgs), [])
-  const cliArgs = useMemo(() => new CliArguments().fromString(settings.cliArgs), [])
 
   const serverAddr$ = useMemo(() => new Subject<string>(), [])
   const serverPort$ = useMemo(() => new Subject<string>(), [])
@@ -71,10 +85,12 @@ export default function Settings() {
       .subscribe(addr => {
         if (validateIP(addr)) {
           setInvalidIP(false)
-          dispatch(setServerAddr(addr))
+          setServerAddr(addr)
+          pushMessage(i18n.t('restartAppMessage'), 'info')
         } else if (validateDomain(addr)) {
           setInvalidIP(false)
-          dispatch(setServerAddr(addr))
+          setServerAddr(addr)
+          pushMessage(i18n.t('restartAppMessage'), 'info')
         } else {
           setInvalidIP(true)
         }
@@ -90,7 +106,8 @@ export default function Settings() {
         takeWhile(val => isFinite(val) && val <= 65535),
       )
       .subscribe(port => {
-        dispatch(setServerPort(port.toString()))
+        setServerPort(port)
+        pushMessage(i18n.t('restartAppMessage'), 'info')
       })
     return () => sub.unsubscribe()
   }, [])
@@ -98,22 +115,22 @@ export default function Settings() {
   /**
    * Language toggler handler 
    */
-  const handleLanguageChange = (event: SelectChangeEvent<LanguageUnion>) => {
+  const handleLanguageChange = (event: SelectChangeEvent<Language>) => {
-    dispatch(setLanguage(event.target.value as LanguageUnion));
+    setLanguage(event.target.value as Language)
   }
 
   /**
    * Theme toggler handler 
    */
-  const handleThemeChange = (event: SelectChangeEvent<ThemeUnion>) => {
+  const handleThemeChange = (event: SelectChangeEvent<Theme>) => {
-    dispatch(setTheme(event.target.value as ThemeUnion));
+    setTheme(event.target.value as Theme)
   }
 
   /**
-   * Send via WebSocket a message to update yt-dlp binary
+   * Updates yt-dlp binary via RPC
    */
   const updateBinary = () => {
-    client.updateExecutable().then(() => dispatch(updated()))
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated')))
   }
 
   return (
@@ -137,22 +154,43 @@ export default function Settings() {
                   <TextField
                     fullWidth
                     label={i18n.t('serverAddressTitle')}
-                    defaultValue={settings.serverAddr}
+                    defaultValue={serverAddr}
                     error={invalidIP}
                     onChange={(e) => serverAddr$.next(e.currentTarget.value)}
                     InputProps={{
                       startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
                     }}
-                    sx={{ mb: 2 }}
                   />
                 </Grid>
                 <Grid item xs={12} md={1}>
                   <TextField
+                    disabled={reverseProxy}
                     fullWidth
                     label={i18n.t('serverPortTitle')}
-                    defaultValue={settings.serverPort}
+                    defaultValue={serverPort}
                     onChange={(e) => serverPort$.next(e.currentTarget.value)}
-                    error={isNaN(Number(settings.serverPort)) || Number(settings.serverPort) > 65535}
+                    error={isNaN(Number(serverPort)) || Number(serverPort) > 65535}
+                  />
+                </Grid>
+                <Grid item xs={12} md={12}>
+                  <TextField
+                    disabled={reverseProxy}
+                    fullWidth
+                    label={i18n.t('appTitle')}
+                    defaultValue={appTitle}
+                    onChange={(e) => setApptitle(e.currentTarget.value)}
+                    error={appTitle === ''}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        defaultChecked={reverseProxy}
+                        onChange={() => setReverseProxy(state => !state)}
+                      />
+                    }
+                    label={i18n.t('servedFromReverseProxyCheckbox')}
                     sx={{ mb: 2 }}
                   />
                 </Grid>
@@ -162,18 +200,15 @@ export default function Settings() {
                   <FormControl fullWidth>
                     <InputLabel>{i18n.t('languageSelect')}</InputLabel>
                     <Select
-                      defaultValue={settings.language}
+                      defaultValue={language}
                       label={i18n.t('languageSelect')}
                       onChange={handleLanguageChange}
                     >
-                      <MenuItem value="english">English</MenuItem>
+                      {languages.map(l => (
-                      <MenuItem value="spanish">Spanish</MenuItem>
+                        <MenuItem value={l} key={l}>
-                      <MenuItem value="italian">Italian</MenuItem>
+                          {capitalize(l)}
-                      <MenuItem value="chinese">Chinese</MenuItem>
+                        </MenuItem>
-                      <MenuItem value="russian">Russian</MenuItem>
+                      ))}
-                      <MenuItem value="korean">Korean</MenuItem>
-                      <MenuItem value="japanese">Japanese</MenuItem>
-                      <MenuItem value="catalan">Catalan</MenuItem>
                     </Select>
                   </FormControl>
                 </Grid>
@@ -181,12 +216,13 @@ export default function Settings() {
                   <FormControl fullWidth>
                     <InputLabel>{i18n.t('themeSelect')}</InputLabel>
                     <Select
-                      defaultValue={settings.theme}
+                      defaultValue={theme}
                       label={i18n.t('themeSelect')}
                       onChange={handleThemeChange}
                     >
                       <MenuItem value="light">Light</MenuItem>
                       <MenuItem value="dark">Dark</MenuItem>
+                      <MenuItem value="system">System</MenuItem>
                     </Select>
                   </FormControl>
                 </Grid>
@@ -194,8 +230,8 @@ export default function Settings() {
               <FormControlLabel
                 control={
                   <Switch
-                    defaultChecked={cliArgs.noMTime}
+                    defaultChecked={argsBuilder.noMTime}
-                    onChange={() => dispatch(setCliArgs(cliArgs.toggleNoMTime().toString()))}
+                    onChange={() => setCliArgs(argsBuilder.toggleNoMTime().toString())}
                   />
                 }
                 label={i18n.t('noMTimeCheckbox')}
@@ -204,9 +240,9 @@ export default function Settings() {
               <FormControlLabel
                 control={
                   <Switch
-                    defaultChecked={cliArgs.extractAudio}
+                    defaultChecked={argsBuilder.extractAudio}
-                    onChange={() => dispatch(setCliArgs(cliArgs.toggleExtractAudio().toString()))}
+                    onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
-                    disabled={settings.formatSelection}
+                    disabled={formatSelection}
                   />
                 }
                 label={i18n.t('extractAudioCheckbox')}
@@ -214,10 +250,10 @@ export default function Settings() {
               <FormControlLabel
                 control={
                   <Switch
-                    defaultChecked={settings.formatSelection}
+                    defaultChecked={formatSelection}
                     onChange={() => {
-                      dispatch(setCliArgs(cliArgs.disableExtractAudio().toString()))
+                      setCliArgs(argsBuilder.disableExtractAudio().toString())
-                      dispatch(setFormatSelection(!settings.formatSelection))
+                      setFormatSelection(!formatSelection)
                     }}
                   />
                 }
@@ -231,9 +267,9 @@ export default function Settings() {
                   <FormControlLabel
                     control={
                       <Switch
-                        defaultChecked={settings.pathOverriding}
+                        defaultChecked={!!pathOverriding}
                         onChange={() => {
-                          dispatch(setPathOverriding(!settings.pathOverriding))
+                          setPathOverriding(state => !state)
                         }}
                       />
                     }
@@ -242,9 +278,9 @@ export default function Settings() {
                   <FormControlLabel
                     control={
                       <Switch
-                        defaultChecked={settings.fileRenaming}
+                        defaultChecked={fileRenaming}
                         onChange={() => {
-                          dispatch(setFileRenaming(!settings.fileRenaming))
+                          setFileRenaming(state => !state)
                         }}
                       />
                     }
@@ -253,9 +289,9 @@ export default function Settings() {
                   <FormControlLabel
                     control={
                       <Switch
-                        defaultChecked={settings.enableCustomArgs}
+                        defaultChecked={enableArgs}
                         onChange={() => {
-                          dispatch(setEnableCustomArgs(!settings.enableCustomArgs))
+                          setEnableArgs(state => !state)
                         }}
                       />
                     }
@@ -263,12 +299,18 @@ export default function Settings() {
                   />
                 </Stack>
               </Grid>
+              <Grid sx={{ mr: 1, mt: 3 }}>
+                <Typography variant="h6" color="primary" sx={{ mb: 2 }}>
+                  Cookies
+                </Typography>
+                <CookiesTextField />
+              </Grid>
               <Grid>
                 <Stack direction="row">
                   <Button
                     sx={{ mr: 1, mt: 3 }}
                     variant="contained"
-                    onClick={() => dispatch(updated())}
+                    onClick={() => updateBinary()}
                   >
                     {i18n.t('updateBinButton')}
                   </Button>
@@ -278,12 +320,6 @@ export default function Settings() {
           </Paper>
         </Grid>
       </Grid>
-      <Snackbar
-        open={status.updated}
-        autoHideDuration={1500}
-        message={i18n.t('toastUpdated')}
-        onClose={updateBinary}
-      />
     </Container>
-  );
+  )
 }

frontend/tsconfig.json

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

frontend/vite.config.ts

@@ -1,7 +1,6 @@
-import react from "@vitejs/plugin-react";
+import react from '@vitejs/plugin-react-swc'
-import ViteYaml from '@modyfi/vite-plugin-yaml';
+import ViteYaml from '@modyfi/vite-plugin-yaml'
-import { defineConfig } from 'vite';
+import { defineConfig } from 'vite'
-import { resolve } from 'path';
 
 export default defineConfig(() => {
   return {
@@ -9,10 +8,9 @@ export default defineConfig(() => {
       react(),
       ViteYaml(),
     ],
-        root: resolve(__dirname, '.'),
+    base: '',
     build: {
       emptyOutDir: true,
-            outDir: resolve(__dirname, 'dist'),
     }
   }
 })

go.mod

@@ -3,29 +3,32 @@ module github.com/marcopeocchi/yt-dlp-web-ui
 go 1.20
 
 require (
-	github.com/goccy/go-json v0.10.2
+	github.com/go-chi/chi/v5 v5.0.10
-	github.com/gofiber/fiber/v2 v2.47.0
+	github.com/go-chi/cors v1.2.1
-	github.com/gofiber/websocket/v2 v2.2.1
 	github.com/golang-jwt/jwt/v5 v5.0.0
-	github.com/google/uuid v1.3.0
+	github.com/google/uuid v1.3.1
+	github.com/gorilla/websocket v1.5.0
 	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
-	golang.org/x/sys v0.9.0
+	golang.org/x/sys v0.13.0
 	gopkg.in/yaml.v3 v3.0.1
 )
 
 require (
-	github.com/andybalholm/brotli v1.0.5 // indirect
+	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/fasthttp/websocket v1.5.3 // indirect
+	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
-	github.com/klauspost/compress v1.16.6 // indirect
+	github.com/mattn/go-isatty v0.0.16 // indirect
-	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/mattn/go-isatty v0.0.19 // indirect
+	golang.org/x/mod v0.3.0 // indirect
-	github.com/mattn/go-runewidth v0.0.14 // indirect
+	golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 // indirect
-	github.com/philhofer/fwd v1.1.2 // indirect
+	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
-	github.com/rivo/uniseg v0.4.4 // indirect
+	lukechampine.com/uint128 v1.2.0 // indirect
-	github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 // indirect
+	modernc.org/cc/v3 v3.40.0 // indirect
-	github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee // indirect
+	modernc.org/ccgo/v3 v3.16.13 // indirect
-	github.com/tinylib/msgp v1.1.8 // indirect
+	modernc.org/libc v1.24.1 // indirect
-	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	modernc.org/mathutil v1.5.0 // indirect
-	github.com/valyala/fasthttp v1.48.0 // indirect
+	modernc.org/memory v1.6.0 // indirect
-	github.com/valyala/tcplisten v1.0.0 // indirect
+	modernc.org/opt v0.1.3 // indirect
+	modernc.org/sqlite v1.26.0 // indirect
+	modernc.org/strutil v1.1.3 // indirect
+	modernc.org/token v1.0.1 // indirect
 )

go.sum

@@ -1,95 +1,72 @@
-github.com/andybalholm/brotli v1.0.5 h1:8uQZIdzKmjc/iuPu7O2ioW48L81FgatrcpfFmiq/cCs=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
-github.com/andybalholm/brotli v1.0.5/go.mod h1:fO7iG3H7G2nSZ7m0zPUDn85XEX2GTukHGRSepvi9Eig=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/fasthttp/websocket v1.5.3 h1:TPpQuLwJYfd4LJPXvHDYPMFWbLjsT91n3GpWtCQtdek=
+github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
-github.com/fasthttp/websocket v1.5.3/go.mod h1:46gg/UBmTU1kUaTcwQXpUxtRwG2PvIZYeA8oL6vF3Fs=
+github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
-github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
-github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
-github.com/gofiber/fiber/v2 v2.47.0 h1:EN5lHVCc+Pyqh5OEsk8fzRiifgwpbrP0rulQ4iNf3fs=
-github.com/gofiber/fiber/v2 v2.47.0/go.mod h1:mbFMVN1lQuzziTkkakgtKKdjfsXSw9BKR5lmcNksUoU=
-github.com/gofiber/websocket/v2 v2.2.1 h1:C9cjxvloojayOp9AovmpQrk8VqvVnT8Oao3+IUygH7w=
-github.com/gofiber/websocket/v2 v2.2.1/go.mod h1:Ao/+nyNnX5u/hIFPuHl28a+NIkrqK7PRimyKaj4JxVU=
 github.com/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
 github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/klauspost/compress v1.16.6 h1:91SKEy4K37vkp255cJ8QesJhjyRO0hn9i9G0GoUwLsk=
+github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
-github.com/klauspost/compress v1.16.6/go.mod h1:ntbaceVETuRiXiv4DpjP66DpAtAGkEQskQzEyD//IeE=
+github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
+github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51/go.mod h1:CzGEWj7cYgsdH8dAjBGEr58BoE7ScuLd+fwFZ44+/x8=
 github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
 github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
-github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-isatty v0.0.16 h1:bq3VjFmv/sOjHtdEhmkEV4x1AJtvUvOJ2PFAZ5+peKQ=
-github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
+github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
-github.com/mattn/go-runewidth v0.0.14 h1:+xnbZSEeDbOIg5/mE6JF0w6n9duR1l3/WmbinWVwUuU=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
-github.com/mattn/go-runewidth v0.0.14/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
-github.com/philhofer/fwd v1.1.1/go.mod h1:gk3iGcWd9+svBvR0sR+KPcfE+RNWozjowpeBVG3ZVNU=
-github.com/philhofer/fwd v1.1.2 h1:bnDivRJ1EWPjUIRXV5KfORO897HTbpFAQddBdE8t7Gw=
-github.com/philhofer/fwd v1.1.2/go.mod h1:qkPdfjR2SIEbspLqpe1tO4n5yICnr2DY7mqEx2tUTP0=
-github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
-github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
-github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
-github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94 h1:rmMl4fXJhKMNWl+K+r/fq4FbbKI+Ia2m9hYBLm2h4G4=
-github.com/savsgio/dictpool v0.0.0-20221023140959-7bf2e61cea94/go.mod h1:90zrgN3D/WJsDd1iXHT96alCoN2KJo6/4x1DZC3wZs8=
-github.com/savsgio/gotils v0.0.0-20220530130905-52f3993e8d6d/go.mod h1:Gy+0tqhJvgGlqnTF8CVGP0AaGRjwBtXs/a5PA0Y3+A4=
-github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
-github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
-github.com/tinylib/msgp v1.1.6/go.mod h1:75BAfg2hauQhs3qedfdDZmWAPcFMAvJE5b9rGOMufyw=
-github.com/tinylib/msgp v1.1.8 h1:FCXC1xanKO4I8plpHGH2P7koL/RzZs12l/+r7vakfm0=
-github.com/tinylib/msgp v1.1.8/go.mod h1:qkpG+2ldGg4xRFmx+jfTvZPxfGFhi64BcnL9vkCm/Tw=
-github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
-github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasthttp v1.48.0 h1:oJWvHb9BIZToTQS3MuQ2R3bJZiNSa2KiNdeI8A+79Tc=
-github.com/valyala/fasthttp v1.48.0/go.mod h1:k2zXd82h/7UZc3VOdJ2WaUqt1uZ/XpXAfE9i+HBC3lA=
-github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
-github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
 github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
-github.com/yuin/goldmark v1.4.13/go.mod h1:6yULJ656Px+3vBD8DxQVa3kxgyrAnzto9xy5taEt/CY=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
-golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
+golang.org/x/mod v0.3.0 h1:RM4zey1++hCTbCVQfnWeKs9/IEsaBLA8vTkd0WVtmH4=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
-golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
-golang.org/x/mod v0.7.0/go.mod h1:iBbtSCu2XBx23ZKBPSOrRkjjQPZFPuis4dIYUhu/chs=
 golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
-golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
-golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
-golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.1.0/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
-golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.9.0 h1:KS/R3tvhPqvJvwcKfnBHJwwthS11LRhmM5D59eEXa0s=
-golang.org/x/sys v0.9.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
-golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
-golang.org/x/term v0.3.0/go.mod h1:q750SLmJuPmVoN1blW3UFBPREJfb1KmY3vwxfr+nFDA=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
-golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
 golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.0.0-20201022035929-9cf592e881e9/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 h1:M8tBwCtWD/cZV9DZpFYRUgaymAYAr+aIUTWzDaM3uPs=
-golang.org/x/tools v0.1.12/go.mod h1:hNGJHUnrk76NpqgfD5Aqm5Crs+Hm0VOH/i9J2+nxYbc=
+golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
-golang.org/x/tools v0.4.0/go.mod h1:UE5sM2OK9E/d67R0ANs2xJizIymRP5gJU295PvKXxjQ=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
 golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+lukechampine.com/uint128 v1.2.0 h1:mBi/5l91vocEN8otkC5bDLhi2KdCticRiwbdB0O+rjI=
+lukechampine.com/uint128 v1.2.0/go.mod h1:c4eWIwlEGaxC/+H1VguhU4PHXNWDCDMUlWdIWl2j1gk=
+modernc.org/cc/v3 v3.40.0 h1:P3g79IUS/93SYhtoeaHW+kRCIrYaxJ27MFPv+7kaTOw=
+modernc.org/cc/v3 v3.40.0/go.mod h1:/bTg4dnWkSXowUO6ssQKnOV0yMVxDYNIsIrzqTFDGH0=
+modernc.org/ccgo/v3 v3.16.13 h1:Mkgdzl46i5F/CNR/Kj80Ri59hC8TKAhZrYSaqvkwzUw=
+modernc.org/ccgo/v3 v3.16.13/go.mod h1:2Quk+5YgpImhPjv2Qsob1DnZ/4som1lJTodubIcoUkY=
+modernc.org/libc v1.24.1 h1:uvJSeCKL/AgzBo2yYIPPTy82v21KgGnizcGYfBHaNuM=
+modernc.org/libc v1.24.1/go.mod h1:FmfO1RLrU3MHJfyi9eYYmZBfi/R+tqZ6+hQ3yQQUkak=
+modernc.org/mathutil v1.5.0 h1:rV0Ko/6SfM+8G+yKiyI830l3Wuz1zRutdslNoQ0kfiQ=
+modernc.org/mathutil v1.5.0/go.mod h1:mZW8CKdRPY1v87qxC/wUdX5O1qDzXMP5TH3wjfpga6E=
+modernc.org/memory v1.6.0 h1:i6mzavxrE9a30whzMfwf7XWVODx2r5OYXvU46cirX7o=
+modernc.org/memory v1.6.0/go.mod h1:PkUhL0Mugw21sHPeskwZW4D6VscE/GQJOnIpCnW6pSU=
+modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
+modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
+modernc.org/sqlite v1.26.0 h1:SocQdLRSYlA8W99V8YH0NES75thx19d9sB/aFc4R8Lw=
+modernc.org/sqlite v1.26.0/go.mod h1:FL3pVXie73rg3Rii6V/u5BoHlSoyeZeIgKZEgHARyCU=
+modernc.org/strutil v1.1.3 h1:fNMm+oJklMGYfU9Ylcywl0CO5O6nTfaowNsh2wpPjzY=
+modernc.org/strutil v1.1.3/go.mod h1:MEHNA7PdEnEwLvspRMtWTNnp2nnyvMfkimT1NKNAGbw=
+modernc.org/token v1.0.1 h1:A3qvTqOwexpfZZeyI0FeGPDlSWX5pjZu9hF4lU+EKWg=
+modernc.org/token v1.0.1/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=

main.go

@@ -5,32 +5,49 @@ import (
 	"flag"
 	"io/fs"
 	"log"
+	"os"
+	"runtime"
 
 	"github.com/marcopeocchi/yt-dlp-web-ui/server"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
 var (
 	port              int
+	queueSize         int
 	configFile        string
 	downloadPath      string
 	downloaderPath    string
+	sessionFilePath   string
+	localDatabasePath string
 
 	requireAuth bool
-	rpcSecret   string
+	username    string
-	//go:embed frontend/dist
+	password    string
+
+	userFromEnv = os.Getenv("USERNAME")
+	passFromEnv = os.Getenv("PASSWORD")
+
+	//go:embed frontend/dist/index.html
+	//go:embed frontend/dist/assets/*
 	frontend embed.FS
 )
 
 func init() {
-	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
 
-	flag.StringVar(&configFile, "conf", "", "yt-dlp-WebUI config file path")
+	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
+	flag.IntVar(&queueSize, "qs", runtime.NumCPU(), "Download queue size")
+
+	flag.StringVar(&configFile, "conf", "./config.yml", "Config file path")
 	flag.StringVar(&downloadPath, "out", ".", "Where files will be saved")
 	flag.StringVar(&downloaderPath, "driver", "yt-dlp", "yt-dlp executable path")
+	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
+	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")
 
 	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
-	flag.StringVar(&rpcSecret, "secret", "", "Secret required for auth")
+	flag.StringVar(&username, "user", userFromEnv, "Username required for auth")
+	flag.StringVar(&password, "pass", passFromEnv, "Password required for auth")
 
 	flag.Parse()
 }
@@ -44,16 +61,20 @@ func main() {
 
 	c := config.Instance()
 
-	c.SetPort(port)
+	c.Port = port
-	c.DownloadPath(downloadPath)
+	c.QueueSize = queueSize
-	c.DownloaderPath(downloaderPath)
+	c.DownloadPath = downloadPath
+	c.DownloaderPath = downloaderPath
+	c.SessionFilePath = sessionFilePath
 
-	c.RequireAuth(requireAuth)
+	c.RequireAuth = requireAuth
-	c.RPCSecret(rpcSecret)
+	c.Username = username
+	c.Password = password
 
-	if configFile != "" {
+	// if config file is found it will be merged with the current config struct
-		c.LoadFromFile(configFile)
+	if err := c.LoadFile(configFile); err != nil {
+		log.Println(cli.BgRed, "config", cli.Reset, "no config file found")
 	}
 
-	server.RunBlocking(port, frontend)
+	server.RunBlocking(port, frontend, localDatabasePath)
 }

server/cli/ascii.go

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

server/config/parser.go

@@ -7,63 +7,40 @@ import (
 	"gopkg.in/yaml.v3"
 )
 
-var lock sync.Mutex
+type Config struct {
-
-type serverConfig struct {
 	Port            int    `yaml:"port"`
 	DownloadPath    string `yaml:"downloadPath"`
 	DownloaderPath  string `yaml:"downloaderPath"`
 	RequireAuth     bool   `yaml:"require_auth"`
-	RPCSecret      string `yaml:"rpc_secret"`
+	Username        string `yaml:"username"`
+	Password        string `yaml:"password"`
+	QueueSize       int    `yaml:"queue_size"`
+	SessionFilePath string `yaml:"session_file_path"`
 }
 
-type config struct {
+var (
-	cfg serverConfig
+	instance     *Config
-}
+	instanceOnce sync.Once
+)
 
-func (c *config) LoadFromFile(filename string) (serverConfig, error) {
+func Instance() *Config {
-	bytes, err := os.ReadFile(filename)
-	if err != nil {
-		return serverConfig{}, err
-	}
-
-	yaml.Unmarshal(bytes, &c.cfg)
-
-	return c.cfg, nil
-}
-
-func (c *config) GetConfig() serverConfig {
-	return c.cfg
-}
-
-func (c *config) SetPort(port int) {
-	c.cfg.Port = port
-}
-
-func (c *config) DownloadPath(path string) {
-	c.cfg.DownloadPath = path
-}
-
-func (c *config) DownloaderPath(path string) {
-	c.cfg.DownloaderPath = path
-}
-
-func (c *config) RequireAuth(value bool) {
-	c.cfg.RequireAuth = value
-}
-func (c *config) RPCSecret(secret string) {
-	c.cfg.RPCSecret = secret
-}
-
-var instance *config
-
-func Instance() *config {
 	if instance == nil {
-		lock.Lock()
+		instanceOnce.Do(func() {
-		defer lock.Unlock()
+			instance = &Config{}
-		if instance == nil {
+		})
-			instance = &config{serverConfig{}}
-		}
 	}
 	return instance
 }
+
+func (c *Config) LoadFile(filename string) error {
+	fd, err := os.Open(filename)
+	if err != nil {
+		return err
+	}
+
+	if err := yaml.NewDecoder(fd).Decode(c); err != nil {
+		return err
+	}
+
+	return nil
+}

server/dbutils/migrate.go

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

server/handlers/archive.go

@@ -0,0 +1,160 @@
+package handlers
+
+import (
+	"encoding/base64"
+	"encoding/json"
+	"net/http"
+	"net/url"
+	"os"
+	"path/filepath"
+	"sort"
+	"strings"
+	"time"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
+)
+
+type DirectoryEntry struct {
+	Name        string    `json:"name"`
+	Path        string    `json:"path"`
+	Size        int64     `json:"size"`
+	SHASum      string    `json:"shaSum"`
+	ModTime     time.Time `json:"modTime"`
+	IsVideo     bool      `json:"isVideo"`
+	IsDirectory bool      `json:"isDirectory"`
+}
+
+func walkDir(root string) (*[]DirectoryEntry, error) {
+	files := []DirectoryEntry{}
+
+	dirs, err := os.ReadDir(root)
+	if err != nil {
+		return nil, err
+	}
+
+	for _, d := range dirs {
+		if !utils.IsValidEntry(d) {
+			continue
+		}
+
+		path := filepath.Join(root, d.Name())
+
+		info, err := d.Info()
+		if err != nil {
+			return nil, err
+		}
+
+		files = append(files, DirectoryEntry{
+			Path:        path,
+			Name:        d.Name(),
+			Size:        info.Size(),
+			SHASum:      utils.ShaSumString(path),
+			IsVideo:     utils.IsVideo(d),
+			IsDirectory: d.IsDir(),
+			ModTime:     info.ModTime(),
+		})
+	}
+
+	return &files, err
+}
+
+type ListRequest struct {
+	SubDir  string `json:"subdir"`
+	OrderBy string `json:"orderBy"`
+}
+
+func ListDownloaded(w http.ResponseWriter, r *http.Request) {
+	root := config.Instance().DownloadPath
+	req := new(ListRequest)
+
+	err := json.NewDecoder(r.Body).Decode(&req)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	files, err := walkDir(filepath.Join(root, req.SubDir))
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	if req.OrderBy == "modtime" {
+		sort.SliceStable(*files, func(i, j int) bool {
+			return (*files)[i].ModTime.After((*files)[j].ModTime)
+		})
+	}
+
+	w.WriteHeader(http.StatusOK)
+	err = json.NewEncoder(w).Encode(files)
+
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}
+
+type DeleteRequest = DirectoryEntry
+
+func DeleteFile(w http.ResponseWriter, r *http.Request) {
+	req := new(DeleteRequest)
+
+	err := json.NewDecoder(r.Body).Decode(&req)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	sum := utils.ShaSumString(req.Path)
+	if sum != req.SHASum {
+		http.Error(w, "shasum mismatch", http.StatusBadRequest)
+		return
+	}
+
+	err = os.Remove(req.Path)
+	if err != nil {
+		http.Error(w, "shasum mismatch", http.StatusBadRequest)
+		return
+	}
+
+	w.WriteHeader(http.StatusOK)
+	json.NewEncoder(w).Encode("ok")
+}
+
+func SendFile(w http.ResponseWriter, r *http.Request) {
+	path := chi.URLParam(r, "id")
+
+	if path == "" {
+		http.Error(w, "inexistent path", http.StatusBadRequest)
+		return
+	}
+
+	path, err := url.QueryUnescape(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decoded, err := base64.StdEncoding.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decodedStr := string(decoded)
+
+	root := config.Instance().DownloadPath
+
+	// TODO: further path / file validations
+	if strings.Contains(filepath.Dir(decodedStr), root) {
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(decodedStr),
+		)
+
+		http.ServeFile(w, r, decodedStr)
+	}
+
+	w.WriteHeader(http.StatusUnauthorized)
+}

server/handlers/login.go

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

server/internal/common.go

@@ -1,12 +1,13 @@
-package server
+package internal
 
 import "time"
 
 // Progress for the Running call
 type DownloadProgress struct {
+	Status     int     `json:"process_status"`
 	Percentage string  `json:"percentage"`
 	Speed      float32 `json:"speed"`
-	ETA        int     `json:"eta"`
+	ETA        float32 `json:"eta"`
 }
 
 // Used to deser the yt-dlp -J output
@@ -19,6 +20,7 @@ type DownloadInfo struct {
 	VCodec      string    `json:"vcodec"`
 	ACodec      string    `json:"acodec"`
 	Extension   string    `json:"ext"`
+	OriginalURL string    `json:"original_url"`
 	CreatedAt   time.Time `json:"created_at"`
 }
 
@@ -48,6 +50,8 @@ type ProcessResponse struct {
 	Id       string           `json:"id"`
 	Progress DownloadProgress `json:"progress"`
 	Info     DownloadInfo     `json:"info"`
+	Output   DownloadOutput   `json:"output"`
+	Params   []string         `json:"params"`
 }
 
 // struct representing the current status of the memoryDB
@@ -63,7 +67,20 @@ type AbortRequest struct {
 
 // struct representing the intent to start a download
 type DownloadRequest struct {
-	Url      string   `json:"url"`
+	Id     string
+	URL    string   `json:"url"`
+	Path   string   `json:"path"`
+	Rename string   `json:"rename"`
 	Params []string `json:"params"`
-	RenameTo string   `json:"renameTo"`
+}
+
+// struct representing request of creating a netscape cookies file
+type SetCookiesRequest struct {
+	Cookies string `json:"cookies"`
+}
+
+type CustomTemplate struct {
+	Id      string `json:"id"`
+	Name    string `json:"name"`
+	Content string `json:"content"`
 }

server/internal/memory_db.go

@@ -1,16 +1,17 @@
-package server
+package internal
 
 import (
+	"encoding/gob"
 	"errors"
 	"fmt"
 	"log"
 	"os"
+	"path/filepath"
 	"sync"
 
-	"github.com/goccy/go-json"
-
 	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
 // In-Memory Thread-Safe Key-Value Storage with optional persistence
@@ -20,7 +21,7 @@ type MemoryDB struct {
 
 // Get a process pointer given its id
 func (m *MemoryDB) Get(id string) (*Process, error) {
-	entry, ok := db.table.Load(id)
+	entry, ok := m.table.Load(id)
 	if !ok {
 		return nil, errors.New("no process found for the given key")
 	}
@@ -29,29 +30,34 @@ func (m *MemoryDB) Get(id string) (*Process, error) {
 
 // Store a pointer of a process and return its id
 func (m *MemoryDB) Set(process *Process) string {
-	id := uuid.Must(uuid.NewRandom()).String()
+	id := uuid.NewString()
-	db.table.Store(id, process)
+	m.table.Store(id, process)
+	process.Id = id
 	return id
 }
 
 // Update a process info/metadata, given the process id
+//
+// Deprecated: will be removed anytime soon.
 func (m *MemoryDB) UpdateInfo(id string, info DownloadInfo) error {
-	entry, ok := db.table.Load(id)
+	entry, ok := m.table.Load(id)
 	if ok {
 		entry.(*Process).Info = info
-		db.table.Store(id, entry)
+		m.table.Store(id, entry)
 		return nil
 	}
 	return fmt.Errorf("can't update row with id %s", id)
 }
 
 // Update a process progress data, given the process id
-// Used for updating completition percentage or ETA
+// Used for updating completition percentage or ETA.
+//
+// Deprecated: will be removed anytime soon.
 func (m *MemoryDB) UpdateProgress(id string, progress DownloadProgress) error {
-	entry, ok := db.table.Load(id)
+	entry, ok := m.table.Load(id)
 	if ok {
 		entry.(*Process).Progress = progress
-		db.table.Store(id, entry)
+		m.table.Store(id, entry)
 		return nil
 	}
 	return fmt.Errorf("can't update row with id %s", id)
@@ -59,12 +65,12 @@ func (m *MemoryDB) UpdateProgress(id string, progress DownloadProgress) error {
 
 // Removes a process progress, given the process id
 func (m *MemoryDB) Delete(id string) {
-	db.table.Delete(id)
+	m.table.Delete(id)
 }
 
 func (m *MemoryDB) Keys() *[]string {
 	running := []string{}
-	db.table.Range(func(key, value any) bool {
+	m.table.Range(func(key, value any) bool {
 		running = append(running, key.(string))
 		return true
 	})
@@ -74,11 +80,13 @@ func (m *MemoryDB) Keys() *[]string {
 // Returns a slice of all currently stored processes progess
 func (m *MemoryDB) All() *[]ProcessResponse {
 	running := []ProcessResponse{}
-	db.table.Range(func(key, value any) bool {
+	m.table.Range(func(key, value any) bool {
 		running = append(running, ProcessResponse{
 			Id:       key.(string),
 			Info:     value.(*Process).Info,
 			Progress: value.(*Process).Progress,
+			Output:   value.(*Process).Output,
+			Params:   value.(*Process).Params,
 		})
 		return true
 	})
@@ -89,33 +97,55 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 func (m *MemoryDB) Persist() {
 	running := m.All()
 
-	session, err := json.Marshal(Session{
+	sf := filepath.Join(config.Instance().SessionFilePath, "session.dat")
-		Processes: *running,
+
-	})
+	fd, err := os.Create(sf)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist database", cli.Reset)
+		log.Println(cli.Red, "Failed to persist session", cli.Reset)
-		return
 	}
 
-	err = os.WriteFile("session.dat", session, 0700)
+	session := Session{
-	if err != nil {
+		Processes: *running,
-		log.Println(cli.Red, "Failed to persist database", cli.Reset)
 	}
+
+	err = gob.NewEncoder(fd).Encode(session)
+	if err != nil {
+		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+	}
+
+	log.Println(cli.BgBlue, "Successfully serialized session", cli.Reset)
 }
 
 // WIP: Restore a persisted state
 func (m *MemoryDB) Restore() {
-	feed, _ := os.ReadFile("session.dat")
+	fd, err := os.Open("session.dat")
+	if err != nil {
+		return
+	}
+
 	session := Session{}
-	json.Unmarshal(feed, &session)
+
+	err = gob.NewDecoder(fd).Decode(&session)
+	if err != nil {
+		return
+	}
 
 	for _, proc := range session.Processes {
-		db.table.Store(proc.Id, &Process{
+		restored := &Process{
-			id:       proc.Id,
+			Id:       proc.Id,
-			url:      proc.Info.URL,
+			Url:      proc.Info.URL,
 			Info:     proc.Info,
 			Progress: proc.Progress,
-			mem:      m,
+			Output:   proc.Output,
-		})
+			Params:   proc.Params,
 		}
+
+		m.table.Store(proc.Id, restored)
+
+		if restored.Progress.Percentage != "-1" {
+			go restored.Start()
+		}
+	}
+
+	log.Println(cli.BgGreen, "Successfully restored session", cli.Reset)
 }

server/internal/message_queue.go

@@ -0,0 +1,65 @@
+package internal
+
+import (
+	"log"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+type MessageQueue struct {
+	producerCh chan *Process
+	consumerCh chan struct{}
+}
+
+// Creates a new message queue.
+// By default it will be created with a size equals to nthe number of logical
+// CPU cores.
+// The queue size can be set via the qs flag.
+func NewMessageQueue() *MessageQueue {
+	size := config.Instance().QueueSize
+
+	if size <= 0 {
+		log.Fatalln("invalid queue size")
+	}
+
+	return &MessageQueue{
+		producerCh: make(chan *Process, size),
+		consumerCh: make(chan struct{}, size),
+	}
+}
+
+// Publish a message to the queue and set the task to a peding state.
+func (m *MessageQueue) Publish(p *Process) {
+	p.SetPending()
+	go p.SetMetadata()
+	m.producerCh <- p
+}
+
+// Publish a message to the queue and set the task to a peding state.
+// ENSURE P IS PART OF A PLAYLIST
+// Needs a further review
+func (m *MessageQueue) PublishPlaylistEntry(p *Process) {
+	m.producerCh <- p
+}
+
+// Setup the consumer listener which subscribes to the changes to the producer
+// channel and triggers the "download" action.
+func (m *MessageQueue) Subscriber() {
+	for msg := range m.producerCh {
+		m.consumerCh <- struct{}{}
+		go func(p *Process) {
+			p.Start()
+			<-m.consumerCh
+		}(msg)
+	}
+}
+
+// Empties the message queue
+func (m *MessageQueue) Empty() {
+	for range m.producerCh {
+		<-m.producerCh
+	}
+	for range m.consumerCh {
+		<-m.consumerCh
+	}
+}

server/internal/playlist.go

@@ -0,0 +1,89 @@
+package internal
+
+import (
+	"encoding/json"
+	"errors"
+	"log"
+	"os/exec"
+	"time"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+type metadata struct {
+	Entries []DownloadInfo `json:"entries"`
+	Count   int            `json:"playlist_count"`
+	Type    string         `json:"_type"`
+}
+
+func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
+	var (
+		downloader = config.Instance().DownloaderPath
+		cmd        = exec.Command(downloader, req.URL, "-J")
+	)
+
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		return err
+	}
+
+	m := metadata{}
+
+	err = cmd.Start()
+	if err != nil {
+		return err
+	}
+
+	log.Println(cli.BgRed, "Decoding metadata", cli.Reset, req.URL)
+
+	err = json.NewDecoder(stdout).Decode(&m)
+	if err != nil {
+		return err
+	}
+
+	log.Println(cli.BgGreen, "Decoded metadata", cli.Reset, req.URL)
+
+	if m.Type == "" {
+		cmd.Wait()
+		return errors.New("probably not a valid URL")
+	}
+
+	if m.Type == "playlist" {
+		log.Println(
+			cli.BgGreen, "Playlist detected", cli.Reset, m.Count, "entries",
+		)
+
+		for i, meta := range m.Entries {
+			delta := time.Second.Microseconds() * int64(i+1)
+
+			proc := &Process{
+				Url:      meta.OriginalURL,
+				Progress: DownloadProgress{},
+				Output: DownloadOutput{
+					Filename: req.Rename,
+				},
+				Info:   meta,
+				Params: req.Params,
+			}
+
+			proc.Info.URL = meta.OriginalURL
+			proc.Info.CreatedAt = time.Now().Add(time.Duration(delta))
+
+			db.Set(proc)
+			proc.SetPending()
+			mq.PublishPlaylistEntry(proc)
+		}
+
+		err = cmd.Wait()
+		return err
+	}
+
+	proc := &Process{Url: req.URL, Params: req.Params}
+
+	mq.Publish(proc)
+	log.Println("Sending new process to message queue", proc.Url)
+
+	err = cmd.Wait()
+	return err
+}

server/internal/process.go

@@ -0,0 +1,300 @@
+package internal
+
+import (
+	"bufio"
+	"encoding/json"
+	"fmt"
+	"regexp"
+	"sync"
+	"syscall"
+
+	"log"
+	"os"
+	"os/exec"
+	"strings"
+	"time"
+
+	"github.com/marcopeocchi/fazzoletti/slices"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/rx"
+)
+
+const template = `download:
+{
+	"eta":%(progress.eta)s, 
+	"percentage":"%(progress._percent_str)s",
+	"speed":%(progress.speed)s
+}`
+
+const (
+	StatusPending = iota
+	StatusDownloading
+	StatusCompleted
+	StatusErrored
+)
+
+type ProgressTemplate struct {
+	Percentage string  `json:"percentage"`
+	Speed      float32 `json:"speed"`
+	Size       string  `json:"size"`
+	Eta        float32 `json:"eta"`
+}
+
+// Process descriptor
+type Process struct {
+	Id       string
+	Url      string
+	Params   []string
+	Info     DownloadInfo
+	Progress DownloadProgress
+	Output   DownloadOutput
+	proc     *os.Process
+}
+
+type DownloadOutput struct {
+	Path     string
+	Filename string
+}
+
+// Starts spawns/forks a new yt-dlp process and parse its stdout.
+// The process is spawned to outputting a custom progress text that
+// Resembles a JSON Object in order to Unmarshal it later.
+// This approach is anyhow not perfect: quotes are not escaped properly.
+// Each process is not identified by its PID but by a UUIDv4
+func (p *Process) Start() {
+	// escape bash variable escaping and command piping, you'll never know
+	// what they might come with...
+	p.Params = slices.Filter(p.Params, func(e string) bool {
+		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
+		return !match
+	})
+
+	p.Params = slices.Filter(p.Params, func(e string) bool {
+		return e != ""
+	})
+
+	out := DownloadOutput{
+		Path:     config.Instance().DownloadPath,
+		Filename: "%(title)s.%(ext)s",
+	}
+
+	if p.Output.Path != "" {
+		out.Path = p.Output.Path
+	}
+
+	if p.Output.Filename != "" {
+		out.Filename = p.Output.Filename + ".%(ext)s"
+	}
+
+	params := append([]string{
+		strings.Split(p.Url, "?list")[0], //no playlist
+		"--newline",
+		"--no-colors",
+		"--no-playlist",
+		"--progress-template",
+		strings.NewReplacer("\n", "", "\t", "", " ", "").Replace(template),
+		"-o",
+		fmt.Sprintf("%s/%s", out.Path, out.Filename),
+	}, p.Params...)
+
+	// ----------------- main block ----------------- //
+	cmd := exec.Command(config.Instance().DownloaderPath, params...)
+	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	r, err := cmd.StdoutPipe()
+	if err != nil {
+		log.Panicln(err)
+	}
+	scan := bufio.NewScanner(r)
+
+	err = cmd.Start()
+	if err != nil {
+		log.Panicln(err)
+	}
+
+	p.proc = cmd.Process
+
+	// --------------- progress block --------------- //
+	var (
+		sourceChan = make(chan []byte)
+		doneChan   = make(chan struct{})
+	)
+
+	// spawn a goroutine that does the dirty job of parsing the stdout
+	// filling the channel with as many stdout line as yt-dlp produces (producer)
+	go func() {
+		defer func() {
+			r.Close()
+			p.Complete()
+			doneChan <- struct{}{}
+			close(sourceChan)
+			close(doneChan)
+		}()
+
+		for scan.Scan() {
+			sourceChan <- scan.Bytes()
+		}
+	}()
+
+	// Slows down the unmarshal operation to every 500ms
+	go func() {
+		rx.Sample(time.Millisecond*500, sourceChan, doneChan, func(event []byte) {
+			stdout := ProgressTemplate{}
+			err := json.Unmarshal(event, &stdout)
+			if err == nil {
+				p.Progress = DownloadProgress{
+					Status:     StatusDownloading,
+					Percentage: stdout.Percentage,
+					Speed:      stdout.Speed,
+					ETA:        stdout.Eta,
+				}
+				log.Println(
+					cli.BgGreen, "DL", cli.Reset,
+					cli.BgBlue, p.getShortId(), cli.Reset,
+					p.Url, stdout.Percentage,
+				)
+			}
+		})
+	}()
+
+	// ------------- end progress block ------------- //
+	cmd.Wait()
+}
+
+// Keep process in the memoryDB but marks it as complete
+// Convention: All completed processes has progress -1
+// and speed 0 bps.
+func (p *Process) Complete() {
+	p.Progress = DownloadProgress{
+		Status:     StatusCompleted,
+		Percentage: "-1",
+		Speed:      0,
+		ETA:        0,
+	}
+
+	shortId := p.getShortId()
+
+	log.Println(
+		cli.BgMagenta, "FINISH", cli.Reset,
+		cli.BgBlue, shortId, cli.Reset,
+		p.Url,
+	)
+}
+
+// Kill a process and remove it from the memory
+func (p *Process) Kill() error {
+	// yt-dlp uses multiple child process the parent process
+	// has been spawned with setPgid = true. To properly kill
+	// all subprocesses a SIGTERM need to be sent to the correct
+	// process group
+	if p.proc != nil {
+		pgid, err := syscall.Getpgid(p.proc.Pid)
+		if err != nil {
+			return err
+		}
+		err = syscall.Kill(-pgid, syscall.SIGTERM)
+
+		log.Println("Killed process", p.Id)
+		return err
+	}
+
+	return nil
+}
+
+// Returns the available format for this URL
+func (p *Process) GetFormatsSync() (DownloadFormats, error) {
+	cmd := exec.Command(config.Instance().DownloaderPath, p.Url, "-J")
+	stdout, err := cmd.Output()
+
+	if err != nil {
+		return DownloadFormats{}, err
+	}
+
+	info := DownloadFormats{URL: p.Url}
+	best := Format{}
+
+	var (
+		wg            sync.WaitGroup
+		decodingError error
+	)
+
+	wg.Add(2)
+
+	if err != nil {
+		return DownloadFormats{}, err
+	}
+
+	log.Println(
+		cli.BgRed, "Metadata", cli.Reset,
+		cli.BgBlue, "Formats", cli.Reset,
+		p.Url,
+	)
+
+	go func() {
+		decodingError = json.Unmarshal(stdout, &info)
+		wg.Done()
+	}()
+
+	go func() {
+		decodingError = json.Unmarshal(stdout, &best)
+		wg.Done()
+	}()
+
+	wg.Wait()
+
+	if decodingError != nil {
+		return DownloadFormats{}, err
+	}
+
+	info.Best = best
+
+	return info, nil
+}
+
+func (p *Process) SetPending() {
+	p.Progress.Status = StatusPending
+}
+
+func (p *Process) SetMetadata() error {
+	cmd := exec.Command(config.Instance().DownloaderPath, p.Url, "-J")
+	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
+
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		log.Println("Cannot retrieve info for", p.Url)
+		return err
+	}
+
+	info := DownloadInfo{
+		URL:       p.Url,
+		CreatedAt: time.Now(),
+	}
+
+	err = cmd.Start()
+	if err != nil {
+		return err
+	}
+
+	log.Println(
+		cli.BgRed, "Metadata", cli.Reset,
+		cli.BgBlue, p.getShortId(), cli.Reset,
+		p.Url,
+	)
+
+	err = json.NewDecoder(stdout).Decode(&info)
+	if err != nil {
+		return err
+	}
+
+	p.Info = info
+	p.Progress.Status = StatusPending
+
+	err = cmd.Wait()
+
+	return err
+}
+
+func (p *Process) getShortId() string {
+	return strings.Split(p.Id, "-")[0]
+}

server/internal/stack.go

@@ -9,13 +9,19 @@ type Stack[T any] struct {
 	count int
 }
 
-func (s *Stack[T]) Push(n *Node[T]) {
+func NewStack[T any]() *Stack[T] {
+	return &Stack[T]{
+		Nodes: make([]*Node[T], 10),
+	}
+}
+
+func (s *Stack[T]) Push(val T) {
 	if s.count >= len(s.Nodes) {
 		Nodes := make([]*Node[T], len(s.Nodes)*2)
 		copy(Nodes, s.Nodes)
 		s.Nodes = Nodes
 	}
-	s.Nodes[s.count] = n
+	s.Nodes[s.count] = &Node[T]{Value: val}
 	s.count++
 }
 

server/middleware/cors.go

@@ -0,0 +1,15 @@
+package middlewares
+
+import "net/http"
+
+// Middleware for applying CORS policy for ALL hosts and for
+// allowing ALL request headers.
+func CORS(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Access-Control-Allow-Origin", "*")
+		w.Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
+		w.Header().Set("Access-Control-Allow-Headers", "*")
+		w.Header().Set("Access-Control-Allow-Credentials", "true")
+		next.ServeHTTP(w, r)
+	})
+}

server/middleware/jwt.go

@@ -2,30 +2,35 @@ package middlewares
 
 import (
 	"fmt"
+	"net/http"
 	"os"
 	"time"
 
-	"github.com/gofiber/fiber/v2"
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
-const (
+func Authenticated(next http.Handler) http.Handler {
-	TOKEN_COOKIE_NAME = "jwt"
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-)
+		if !config.Instance().RequireAuth {
-
+			next.ServeHTTP(w, r)
-var Authenticated = func(c *fiber.Ctx) error {
+			return
-	if !config.Instance().GetConfig().RequireAuth {
-		return c.Next()
 		}
 
-	cookie := c.Cookies(TOKEN_COOKIE_NAME)
+		cookie, err := r.Cookie(utils.TOKEN_COOKIE_NAME)
 
-	if cookie == "" {
+		if err != nil {
-		return c.Status(fiber.StatusUnauthorized).SendString("invalid token")
+			http.Error(w, "invalid token", http.StatusBadRequest)
+			return
 		}
 
-	token, _ := jwt.Parse(cookie, func(t *jwt.Token) (interface{}, error) {
+		if cookie == nil {
+			http.Error(w, "invalid token", http.StatusBadRequest)
+			return
+		}
+
+		token, _ := jwt.Parse(cookie.Value, func(t *jwt.Token) (interface{}, error) {
 			if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
 				return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
 			}
@@ -36,15 +41,19 @@ var Authenticated = func(c *fiber.Ctx) error {
 			expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
 
 			if err != nil {
-			return c.SendStatus(fiber.StatusInternalServerError)
+				http.Error(w, err.Error(), http.StatusInternalServerError)
+				return
 			}
 
 			if time.Now().After(expiresAt) {
-			return c.Status(fiber.StatusBadRequest).SendString("expired token")
+				http.Error(w, "token expired", http.StatusBadRequest)
+				return
 			}
 		} else {
-		return c.Status(fiber.StatusUnauthorized).SendString("invalid token")
+			http.Error(w, "invalid token", http.StatusBadRequest)
+			return
 		}
 
-	return c.Next()
+		next.ServeHTTP(w, r)
+	})
 }

server/middleware/spa_handler.go

@@ -0,0 +1,93 @@
+package middlewares
+
+import (
+	"fmt"
+	"io"
+	"io/fs"
+	"mime"
+	"net/http"
+	"os"
+	"path/filepath"
+	"strings"
+)
+
+type SpaHandler struct {
+	Entrypoint string
+	Filesystem fs.FS
+	routes     []string
+}
+
+func NewSpaHandler(index string, fs fs.FS) *SpaHandler {
+	return &SpaHandler{
+		Entrypoint: index,
+		Filesystem: fs,
+	}
+}
+
+func (s *SpaHandler) AddClientRoute(route string) *SpaHandler {
+	s.routes = append(s.routes, route)
+	return s
+}
+
+// Handler for serving a compiled react frontend
+// each client-side routes must be provided
+func (s *SpaHandler) Handler() http.HandlerFunc {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			http.Error(
+				w,
+				http.StatusText(http.StatusMethodNotAllowed),
+				http.StatusMethodNotAllowed,
+			)
+			return
+		}
+
+		path := filepath.Clean(r.URL.Path)
+
+		// basically all frontend routes are needed :/
+		hasRoute := false
+		for _, route := range s.routes {
+			hasRoute = strings.HasPrefix(path, route)
+			if hasRoute {
+				break
+			}
+		}
+
+		if path == "/" || hasRoute {
+			path = s.Entrypoint
+		}
+
+		path = strings.TrimPrefix(path, "/")
+
+		file, err := s.Filesystem.Open(path)
+
+		if err != nil {
+			if os.IsNotExist(err) {
+				http.NotFound(w, r)
+				return
+			}
+			http.Error(
+				w,
+				http.StatusText(http.StatusInternalServerError),
+				http.StatusInternalServerError,
+			)
+			return
+		}
+
+		contentType := mime.TypeByExtension(filepath.Ext(path))
+		w.Header().Set("Content-Type", contentType)
+
+		if strings.HasPrefix(path, "assets/") {
+			w.Header().Set("Cache-Control", "public, max-age=2592000")
+		}
+
+		stat, err := file.Stat()
+		if err == nil && stat.Size() > 0 {
+			w.Header().Set("Content-Length", fmt.Sprintf("%d", stat.Size()))
+		}
+
+		w.WriteHeader(http.StatusOK)
+
+		io.Copy(w, file)
+	})
+}

server/process.go

@@ -1,210 +0,0 @@
-package server
-
-import (
-	"bufio"
-	"fmt"
-	"regexp"
-	"syscall"
-
-	"github.com/goccy/go-json"
-
-	"log"
-	"os"
-	"os/exec"
-	"strings"
-	"time"
-
-	"github.com/marcopeocchi/fazzoletti/slices"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/rx"
-)
-
-const template = `download:
-{
-	"eta":%(progress.eta)s, 
-	"percentage":"%(progress._percent_str)s",
-	"speed":%(progress.speed)s
-}`
-
-var (
-	cfg = config.Instance()
-)
-
-type ProgressTemplate struct {
-	Percentage string  `json:"percentage"`
-	Speed      float32 `json:"speed"`
-	Size       string  `json:"size"`
-	Eta        int     `json:"eta"`
-}
-
-// Process descriptor
-type Process struct {
-	id       string
-	url      string
-	params   []string
-	Info     DownloadInfo
-	Progress DownloadProgress
-	mem      *MemoryDB
-	proc     *os.Process
-}
-
-type downloadOutput struct {
-	path     string
-	filaneme string
-}
-
-// Starts spawns/forks a new yt-dlp process and parse its stdout.
-// The process is spawned to outputting a custom progress text that
-// Resembles a JSON Object in order to Unmarshal it later.
-// This approach is anyhow not perfect: quotes are not escaped properly.
-// Each process is not identified by its PID but by a UUIDv2
-func (p *Process) Start(path, filename string) {
-	// escape bash variable escaping and command piping, you'll never know
-	// what they might come with...
-	p.params = slices.Filter(p.params, func(e string) bool {
-		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
-		return !match
-	})
-
-	out := downloadOutput{
-		path:     cfg.GetConfig().DownloadPath,
-		filaneme: "%(title)s.%(ext)s",
-	}
-
-	if path != "" {
-		out.path = path
-	}
-	if filename != "" {
-		out.filaneme = filename + ".%(ext)s"
-	}
-
-	params := append([]string{
-		strings.Split(p.url, "?list")[0], //no playlist
-		"--newline",
-		"--no-colors",
-		"--no-playlist",
-		"--progress-template", strings.ReplaceAll(template, "\n", ""),
-		"-o",
-		fmt.Sprintf("%s/%s", out.path, out.filaneme),
-	}, p.params...)
-
-	// ----------------- main block ----------------- //
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, params...)
-	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-	r, err := cmd.StdoutPipe()
-	if err != nil {
-		log.Panicln(err)
-	}
-	scan := bufio.NewScanner(r)
-
-	err = cmd.Start()
-	if err != nil {
-		log.Panicln(err)
-	}
-
-	p.id = p.mem.Set(p)
-	p.proc = cmd.Process
-
-	// ----------------- info block ----------------- //
-	// spawn a goroutine that retrieves the info for the download
-	go func() {
-		cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.url, "-J")
-		cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-		stdout, err := cmd.Output()
-		if err != nil {
-			log.Println("Cannot retrieve info for", p.url)
-		}
-		info := DownloadInfo{
-			URL:       p.url,
-			CreatedAt: time.Now(),
-		}
-		json.Unmarshal(stdout, &info)
-		p.mem.UpdateInfo(p.id, info)
-	}()
-
-	// --------------- progress block --------------- //
-	// unbuffered channel connected to stdout
-	eventChan := make(chan string)
-
-	// spawn a goroutine that does the dirty job of parsing the stdout
-	// filling the channel with as many stdout line as yt-dlp produces (producer)
-	go func() {
-		defer r.Close()
-		defer p.Complete()
-		for scan.Scan() {
-			eventChan <- scan.Text()
-		}
-		cmd.Wait()
-	}()
-
-	// do the unmarshal operation every 250ms (consumer)
-	go rx.Debounce(time.Millisecond*250, eventChan, func(text string) {
-		stdout := ProgressTemplate{}
-		err := json.Unmarshal([]byte(text), &stdout)
-		if err == nil {
-			p.mem.UpdateProgress(p.id, DownloadProgress{
-				Percentage: stdout.Percentage,
-				Speed:      stdout.Speed,
-				ETA:        stdout.Eta,
-			})
-			shortId := strings.Split(p.id, "-")[0]
-			log.Printf("[%s] %s %s\n", shortId, p.url, p.Progress.Percentage)
-		}
-	})
-	// ------------- end progress block ------------- //
-}
-
-// Keep process in the memoryDB but marks it as complete
-// Convention: All completed processes has progress -1
-// and speed 0 bps.
-func (p *Process) Complete() {
-	p.mem.UpdateProgress(p.id, DownloadProgress{
-		Percentage: "-1",
-		Speed:      0,
-		ETA:        0,
-	})
-}
-
-// Kill a process and remove it from the memory
-func (p *Process) Kill() error {
-	p.mem.Delete(p.id)
-	// yt-dlp uses multiple child process the parent process
-	// has been spawned with setPgid = true. To properly kill
-	// all subprocesses a SIGTERM need to be sent to the correct
-	// process group
-	if p.proc != nil {
-		pgid, err := syscall.Getpgid(p.proc.Pid)
-		if err != nil {
-			return err
-		}
-		err = syscall.Kill(-pgid, syscall.SIGTERM)
-
-		log.Println("Killed process", p.id)
-		return err
-	}
-	return nil
-}
-
-// Returns the available format for this URL
-func (p *Process) GetFormatsSync() (DownloadFormats, error) {
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.url, "-J")
-	stdout, err := cmd.Output()
-
-	if err != nil {
-		return DownloadFormats{}, err
-	}
-
-	cmd.Wait()
-
-	info := DownloadFormats{URL: p.url}
-	best := Format{}
-
-	json.Unmarshal(stdout, &info)
-	json.Unmarshal(stdout, &best)
-
-	info.Best = best
-
-	return info, nil
-}

server/rest/container.go

@@ -0,0 +1,31 @@
+package rest
+
+import (
+	"database/sql"
+
+	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+)
+
+func Container(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) *Handler {
+	var (
+		service = ProvideService(db, mdb, mq)
+		handler = ProvideHandler(service)
+	)
+	return handler
+}
+
+func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) func(chi.Router) {
+	h := Container(db, mdb, mq)
+
+	return func(r chi.Router) {
+		r.Use(middlewares.Authenticated)
+		r.Post("/exec", h.Exec())
+		r.Get("/running", h.Running())
+		r.Post("/cookies", h.SetCookies())
+		r.Post("/template", h.AddTemplate())
+		r.Get("/template/all", h.GetTemplates())
+		r.Delete("/template/{id}", h.DeleteTemplate())
+	}
+}

server/rest/handlers.go

@@ -1,195 +1,156 @@
 package rest
 
 import (
-	"encoding/hex"
+	"encoding/json"
-	"errors"
 	"net/http"
-	"os"
-	"path/filepath"
-	"sort"
-	"strings"
-	"time"
 
-	"github.com/gofiber/fiber/v2"
+	"github.com/go-chi/chi/v5"
-	"github.com/golang-jwt/jwt/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
-const (
+type Handler struct {
-	TOKEN_COOKIE_NAME = "jwt"
+	service *Service
-)
-
-type DirectoryEntry struct {
-	Name        string    `json:"name"`
-	Path        string    `json:"path"`
-	Size        int64     `json:"size"`
-	SHASum      string    `json:"shaSum"`
-	ModTime     time.Time `json:"modTime"`
-	IsVideo     bool      `json:"isVideo"`
-	IsDirectory bool      `json:"isDirectory"`
 }
 
-func walkDir(root string) (*[]DirectoryEntry, error) {
+func (h *Handler) Exec() http.HandlerFunc {
-	files := []DirectoryEntry{}
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
 
-	dirs, err := os.ReadDir(root)
+		w.Header().Set("Content-Type", "application/json")
+
+		req := internal.DownloadRequest{}
+
+		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+
+		id, err := h.service.Exec(req)
 		if err != nil {
-		return nil, err
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 
-	for _, d := range dirs {
+		err = json.NewEncoder(w).Encode(id)
-		if !utils.IsValidEntry(d) {
-			continue
-		}
-
-		path := filepath.Join(root, d.Name())
-
-		info, err := d.Info()
 		if err != nil {
-			return nil, err
+			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
-
-		files = append(files, DirectoryEntry{
-			Path:        path,
-			Name:        d.Name(),
-			Size:        info.Size(),
-			SHASum:      utils.ShaSumString(path),
-			IsVideo:     utils.IsVideo(d),
-			IsDirectory: d.IsDir(),
-			ModTime:     info.ModTime(),
-		})
 	}
-
-	return &files, err
 }
 
-type ListRequest struct {
+func (h *Handler) Running() http.HandlerFunc {
-	SubDir  string `json:"subdir"`
+	return func(w http.ResponseWriter, r *http.Request) {
-	OrderBy string `json:"orderBy"`
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		res, err := h.service.Running(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode(res)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
 }
 
-func ListDownloaded(ctx *fiber.Ctx) error {
+func (h *Handler) SetCookies() http.HandlerFunc {
-	root := config.Instance().GetConfig().DownloadPath
+	return func(w http.ResponseWriter, r *http.Request) {
-	req := new(ListRequest)
+		defer r.Body.Close()
 
-	err := ctx.BodyParser(req)
+		w.Header().Set("Content-Type", "application/json")
+
+		req := new(internal.SetCookiesRequest)
+
+		err := json.NewDecoder(r.Body).Decode(req)
 		if err != nil {
-		return err
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
 		}
 
-	files, err := walkDir(filepath.Join(root, req.SubDir))
+		err = h.service.SetCookies(r.Context(), req.Cookies)
 		if err != nil {
-		return err
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 
-	if req.OrderBy == "modtime" {
+		err = json.NewEncoder(w).Encode("ok")
-		sort.SliceStable(*files, func(i, j int) bool {
+		if err != nil {
-			return (*files)[i].ModTime.After((*files)[j].ModTime)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
-		})
+		}
 	}
-
-	ctx.Status(http.StatusOK)
-	return ctx.JSON(files)
 }
 
-type DeleteRequest = DirectoryEntry
+func (h *Handler) AddTemplate() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
 
-func DeleteFile(ctx *fiber.Ctx) error {
+		w.Header().Set("Content-Type", "application/json")
-	req := new(DeleteRequest)
 
-	err := ctx.BodyParser(req)
+		req := new(internal.CustomTemplate)
+
+		err := json.NewDecoder(r.Body).Decode(req)
 		if err != nil {
-		return err
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
 		}
 
-	sum := utils.ShaSumString(req.Path)
+		if req.Name == "" || req.Content == "" {
-	if sum != req.SHASum {
+			http.Error(w, "Invalid template", http.StatusBadRequest)
-		return errors.New("shasum mismatch")
+			return
 		}
 
-	err = os.Remove(req.Path)
+		err = h.service.SaveTemplate(r.Context(), req)
 		if err != nil {
-		return err
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 
-	ctx.Status(fiber.StatusOK)
+		err = json.NewEncoder(w).Encode("ok")
-	return ctx.JSON("ok")
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
 }
 
-func SendFile(ctx *fiber.Ctx) error {
+func (h *Handler) GetTemplates() http.HandlerFunc {
-	path := ctx.Params("id")
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
 
-	if path == "" {
+		w.Header().Set("Content-Type", "application/json")
-		return errors.New("inexistent path")
-	}
 
-	decoded, err := hex.DecodeString(path)
+		templates, err := h.service.GetTemplates(r.Context())
 		if err != nil {
-		return err
+			http.Error(w, err.Error(), http.StatusInternalServerError)
-	}
+			return
-	decodedStr := string(decoded)
-
-	root := config.Instance().GetConfig().DownloadPath
-
-	// TODO: further path / file validations
-	if strings.Contains(filepath.Dir(decodedStr), root) {
-		// ctx.Response().Header.Set(
-		// 	"Content-Disposition",
-		// 	"inline; filename="+filepath.Base(decodedStr),
-		// )
-		ctx.SendStatus(fiber.StatusOK)
-		return ctx.SendFile(decodedStr)
 		}
 
-	return ctx.SendStatus(fiber.StatusUnauthorized)
+		err = json.NewEncoder(w).Encode(templates)
-}
-
-type LoginRequest struct {
-	Secret string `json:"secret"`
-}
-
-func Login(ctx *fiber.Ctx) error {
-	req := new(LoginRequest)
-	err := ctx.BodyParser(req)
 		if err != nil {
-		return ctx.SendStatus(fiber.StatusInternalServerError)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
-
-	if config.Instance().GetConfig().RPCSecret != req.Secret {
-		return ctx.SendStatus(fiber.StatusBadRequest)
 	}
+}
 
-	token := jwt.NewWithClaims(jwt.SigningMethodHS256, jwt.MapClaims{
+func (h *Handler) DeleteTemplate() http.HandlerFunc {
-		"expiresAt": time.Now().Add(time.Minute * 30),
+	return func(w http.ResponseWriter, r *http.Request) {
-	})
+		defer r.Body.Close()
 
-	tokenString, err := token.SignedString([]byte(os.Getenv("JWT_SECRET")))
+		w.Header().Set("Content-Type", "application/json")
+
+		id := chi.URLParam(r, "id")
+
+		err := h.service.DeleteTemplate(r.Context(), id)
 		if err != nil {
-		return ctx.SendStatus(fiber.StatusInternalServerError)
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
 		}
 
-	ctx.Cookie(&fiber.Cookie{
+		err = json.NewEncoder(w).Encode("ok")
-		Name:     TOKEN_COOKIE_NAME,
+		if err != nil {
-		HTTPOnly: true,
+			http.Error(w, err.Error(), http.StatusInternalServerError)
-		Secure:   false,
+		}
-		Expires:  time.Now().Add(time.Hour * 24 * 30), // 30 days
+	}
-		Value:    tokenString,
-		Path:     "/",
-	})
-
-	return ctx.SendStatus(fiber.StatusOK)
-}
-
-func Logout(ctx *fiber.Ctx) error {
-	ctx.Cookie(&fiber.Cookie{
-		Name:     TOKEN_COOKIE_NAME,
-		HTTPOnly: true,
-		Secure:   false,
-		Expires:  time.Now(),
-		Value:    "",
-		Path:     "/",
-	})
-
-	return ctx.SendStatus(fiber.StatusOK)
 }

server/rest/provider.go

@@ -0,0 +1,36 @@
+package rest
+
+import (
+	"database/sql"
+	"sync"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+var (
+	service *Service
+	handler *Handler
+
+	serviceOnce sync.Once
+	handlerOnce sync.Once
+)
+
+func ProvideService(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) *Service {
+	serviceOnce.Do(func() {
+		service = &Service{
+			mdb: mdb,
+			db:  db,
+			mq:  mq,
+		}
+	})
+	return service
+}
+
+func ProvideHandler(svc *Service) *Handler {
+	handlerOnce.Do(func() {
+		handler = &Handler{
+			service: svc,
+		}
+	})
+	return handler
+}

server/rest/service.go

@@ -0,0 +1,115 @@
+package rest
+
+import (
+	"context"
+	"database/sql"
+	"errors"
+	"os"
+
+	"github.com/google/uuid"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+)
+
+type Service struct {
+	mdb *internal.MemoryDB
+	db  *sql.DB
+	mq  *internal.MessageQueue
+}
+
+func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
+	p := &internal.Process{
+		Url:    req.URL,
+		Params: req.Params,
+		Output: internal.DownloadOutput{
+			Path:     req.Path,
+			Filename: req.Rename,
+		},
+	}
+
+	id := s.mdb.Set(p)
+	s.mq.Publish(p)
+
+	return id, nil
+}
+
+func (s *Service) Running(ctx context.Context) (*[]internal.ProcessResponse, error) {
+	select {
+	case <-ctx.Done():
+		return nil, errors.New("context cancelled")
+	default:
+		return s.mdb.All(), nil
+	}
+}
+
+func (s *Service) SetCookies(ctx context.Context, cookies string) error {
+	fd, err := os.Create("cookies.txt")
+	if err != nil {
+		return err
+	}
+
+	defer fd.Close()
+	fd.WriteString(cookies)
+
+	return nil
+}
+
+func (s *Service) SaveTemplate(ctx context.Context, template *internal.CustomTemplate) error {
+	conn, err := s.db.Conn(ctx)
+	if err != nil {
+		return err
+	}
+
+	defer conn.Close()
+
+	_, err = conn.ExecContext(
+		ctx,
+		"INSERT INTO templates (id, name, content) VALUES (?, ?, ?)",
+		uuid.NewString(),
+		template.Name,
+		template.Content,
+	)
+
+	return err
+}
+
+func (s *Service) GetTemplates(ctx context.Context) (*[]internal.CustomTemplate, error) {
+	conn, err := s.db.Conn(ctx)
+	if err != nil {
+		return nil, err
+	}
+
+	defer conn.Close()
+
+	rows, err := conn.QueryContext(ctx, "SELECT * FROM templates")
+	if err != nil {
+		return nil, err
+	}
+
+	templates := make([]internal.CustomTemplate, 0)
+
+	for rows.Next() {
+		t := internal.CustomTemplate{}
+
+		err := rows.Scan(&t.Id, &t.Name, &t.Content)
+		if err != nil {
+			return nil, err
+		}
+
+		templates = append(templates, t)
+	}
+
+	return &templates, nil
+}
+
+func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
+	conn, err := s.db.Conn(ctx)
+	if err != nil {
+		return err
+	}
+
+	defer conn.Close()
+
+	_, err = conn.ExecContext(ctx, "DELETE FROM templates WHERE id = ?", id)
+
+	return err
+}

server/rpc/container.go

@@ -0,0 +1,24 @@
+package rpc
+
+import (
+	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
+)
+
+// Dependency injection container.
+func Container(db *internal.MemoryDB, mq *internal.MessageQueue) *Service {
+	return &Service{
+		db: db,
+		mq: mq,
+	}
+}
+
+// RPC service must be registered before applying this router!
+func ApplyRouter() func(chi.Router) {
+	return func(r chi.Router) {
+		r.Use(middlewares.Authenticated)
+		r.Get("/ws", WebSocket)
+		r.Post("/http", Post)
+	}
+}

server/rpc/handlers.go

@@ -0,0 +1,57 @@
+package rpc
+
+import (
+	"io"
+	"net/http"
+
+	"github.com/gorilla/websocket"
+)
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true
+	},
+}
+
+func WebSocket(w http.ResponseWriter, r *http.Request) {
+	c, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	defer c.Close()
+
+	// notify client that conn is open and ok
+	c.WriteJSON(struct{ Status string }{Status: "connected"})
+
+	for {
+		mtype, reader, err := c.NextReader()
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			break
+		}
+
+		res := newRequest(reader).Call()
+
+		writer, err := c.NextWriter(mtype)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			break
+		}
+
+		io.Copy(writer, res)
+	}
+}
+
+func Post(w http.ResponseWriter, r *http.Request) {
+	defer r.Body.Close()
+
+	res := newRequest(r.Body).Call()
+	_, err := io.Copy(w, res)
+
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+}

server/rpc/service.go

@@ -0,0 +1,159 @@
+package rpc
+
+import (
+	"log"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/updater"
+)
+
+type Service struct {
+	db *internal.MemoryDB
+	mq *internal.MessageQueue
+}
+
+type Running []internal.ProcessResponse
+type Pending []string
+
+type NoArgs struct{}
+
+type Args struct {
+	Id     string
+	URL    string
+	Params []string
+}
+
+// Exec spawns a Process.
+// The result of the execution is the newly spawned process Id.
+func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
+	p := &internal.Process{
+		Url:    args.URL,
+		Params: args.Params,
+		Output: internal.DownloadOutput{
+			Path:     args.Path,
+			Filename: args.Rename,
+		},
+	}
+
+	s.db.Set(p)
+	s.mq.Publish(p)
+
+	*result = p.Id
+	return nil
+}
+
+// Exec spawns a Process.
+// The result of the execution is the newly spawned process Id.
+func (s *Service) ExecPlaylist(args internal.DownloadRequest, result *string) error {
+	err := internal.PlaylistDetect(args, s.mq, s.db)
+	if err != nil {
+		return err
+	}
+
+	*result = ""
+
+	return nil
+}
+
+// Progess retrieves the Progress of a specific Process given its Id
+func (s *Service) Progess(args Args, progress *internal.DownloadProgress) error {
+	proc, err := s.db.Get(args.Id)
+	if err != nil {
+		return err
+	}
+	*progress = proc.Progress
+	return nil
+}
+
+// Progess retrieves available format for a given resource
+func (s *Service) Formats(args Args, meta *internal.DownloadFormats) error {
+	var err error
+	p := internal.Process{Url: args.URL}
+	*meta, err = p.GetFormatsSync()
+	return err
+}
+
+// Pending retrieves a slice of all Pending/Running processes ids
+func (s *Service) Pending(args NoArgs, pending *Pending) error {
+	*pending = *s.db.Keys()
+	return nil
+}
+
+// Running retrieves a slice of all Processes progress
+func (s *Service) Running(args NoArgs, running *Running) error {
+	*running = *s.db.All()
+	return nil
+}
+
+// Kill kills a process given its id and remove it from the memoryDB
+func (s *Service) Kill(args string, killed *string) error {
+	log.Println("Trying killing process with id", args)
+	proc, err := s.db.Get(args)
+
+	if err != nil {
+		return err
+	}
+	if proc != nil {
+		err = proc.Kill()
+		s.db.Delete(proc.Id)
+	}
+
+	s.db.Delete(proc.Id)
+	return err
+}
+
+// KillAll kills all process unconditionally and removes them from
+// the memory db
+func (s *Service) KillAll(args NoArgs, killed *string) error {
+	log.Println("Killing all spawned processes", args)
+	keys := s.db.Keys()
+	var err error
+	for _, key := range *keys {
+		proc, err := s.db.Get(key)
+		if err != nil {
+			return err
+		}
+		if proc != nil {
+			proc.Kill()
+			s.db.Delete(proc.Id)
+		}
+	}
+	s.mq.Empty()
+	return err
+}
+
+// Remove a process from the db rendering it unusable if active
+func (s *Service) Clear(args string, killed *string) error {
+	log.Println("Clearing process with id", args)
+	s.db.Delete(args)
+	return nil
+}
+
+// FreeSpace gets the available from package sys util
+func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
+	freeSpace, err := sys.FreeSpace()
+	*free = freeSpace
+	return err
+}
+
+// Return a flattned tree of the download directory
+func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
+	dfsTree, err := sys.DirectoryTree()
+	if dfsTree != nil {
+		*tree = *dfsTree
+	}
+	return err
+}
+
+// Updates the yt-dlp binary using its builtin function
+func (s *Service) UpdateExecutable(args NoArgs, updated *bool) error {
+	log.Println("Updating yt-dlp executable to the latest release")
+	err := updater.UpdateExecutable()
+	if err != nil {
+		*updated = true
+		return err
+	}
+	*updated = false
+	return err
+}

server/rpc/wrapper.go

@@ -1,4 +1,4 @@
-package server
+package rpc
 
 import (
 	"bytes"
@@ -13,7 +13,7 @@ type rpcRequest struct {
 	done chan bool
 }
 
-func NewRPCRequest(r io.Reader) *rpcRequest {
+func newRequest(r io.Reader) *rpcRequest {
 	var buf bytes.Buffer
 	done := make(chan bool)
 	return &rpcRequest{r, &buf, done}

server/rx/extensions.go

@@ -2,47 +2,27 @@ package rx
 
 import "time"
 
-/*
-	Package rx contains:
-	-	Definitions for common reactive programming functions/patterns
-*/
-
-// ReactiveX inspired debounce function.
-//
-// Debounce emits a string from the source channel only after a particular
-// time span determined a Go Interval
-//
-// --A--B--CD--EFG-------|>
-//
-//	-t->                 |>
-//	       -t->          |>   t is a timer tick
-//	             -t->    |>
-//
-// --A-----C-----G-------|>
-func Debounce(interval time.Duration, source chan string, f func(emit string)) {
-	var item string
-	timer := time.NewTimer(interval)
-	for {
-		select {
-		case item = <-source:
-			timer.Reset(interval)
-		case <-timer.C:
-			if item != "" {
-				f(item)
-			}
-		}
-	}
-}
-
 // ReactiveX inspired sample function.
 //
 // Debounce emits the most recently emitted value from the source
 // withing the timespan set by the span time.Duration
-func Sample[T any](span time.Duration, source chan T, cb func(emit T)) {
+func Sample(span time.Duration, source chan []byte, done chan struct{}, fn func(e []byte)) {
-	timer := time.NewTimer(span)
+	var (
+		item   []byte
+		ticker = time.NewTicker(span)
+	)
+
 	for {
-		<-timer.C
+		select {
-		cb(<-source)
+		case <-ticker.C:
-		timer.Reset(span)
+			if item != nil {
+				fn(item)
+			}
+		case <-source:
+			item = <-source
+		case <-done:
+			ticker.Stop()
+			return
+		}
 	}
 }

server/server.go

@@ -2,8 +2,8 @@ package server
 
 import (
 	"context"
+	"database/sql"
 	"fmt"
-	"io"
 	"io/fs"
 	"log"
 	"net/http"
@@ -13,93 +13,98 @@ import (
 	"syscall"
 	"time"
 
-	"github.com/gofiber/fiber/v2"
+	"github.com/go-chi/chi/v5"
-	"github.com/gofiber/fiber/v2/middleware/cors"
+	"github.com/go-chi/chi/v5/middleware"
-	"github.com/gofiber/fiber/v2/middleware/filesystem"
+	"github.com/go-chi/cors"
-	"github.com/gofiber/websocket/v2"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/dbutils"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/handlers"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/rest"
+	ytdlpRPC "github.com/marcopeocchi/yt-dlp-web-ui/server/rpc"
+
+	_ "modernc.org/sqlite"
 )
 
-var db MemoryDB
+type serverConfig struct {
-
+	frontend fs.FS
-func RunBlocking(port int, frontend fs.FS) {
+	port     int
-	db.Restore()
+	mdb      *internal.MemoryDB
-
+	db       *sql.DB
-	service := new(Service)
+	mq       *internal.MessageQueue
-	rpc.Register(service)
-
-	app := fiber.New()
-
-	app.Use(cors.New())
-	app.Use("/", filesystem.New(filesystem.Config{
-		Root: http.FS(frontend),
-	}))
-
-	// Client side routes
-	app.Get("/settings", func(c *fiber.Ctx) error {
-		return c.Redirect("/")
-	})
-	app.Get("/archive", func(c *fiber.Ctx) error {
-		return c.Redirect("/")
-	})
-	app.Get("/login", func(c *fiber.Ctx) error {
-		return c.Redirect("/")
-	})
-
-	// Archive routes
-	archive := app.Group("archive", middlewares.Authenticated)
-	archive.Post("/downloaded", rest.ListDownloaded)
-	archive.Post("/delete", rest.DeleteFile)
-	archive.Get("/d/:id", rest.SendFile)
-
-	// Authentication routes
-	app.Post("/auth/login", rest.Login)
-	app.Get("/auth/logout", rest.Logout)
-
-	// RPC handlers
-	// websocket
-	rpc := app.Group("/rpc", middlewares.Authenticated)
-
-	rpc.Get("/ws", websocket.New(func(c *websocket.Conn) {
-		c.WriteMessage(websocket.TextMessage, []byte(`{
-			"status": "connected"
-		}`))
-
-		for {
-			mtype, reader, err := c.NextReader()
-			if err != nil {
-				break
-			}
-			res := NewRPCRequest(reader).Call()
-
-			writer, err := c.NextWriter(mtype)
-			if err != nil {
-				break
-			}
-			io.Copy(writer, res)
-		}
-	}))
-	// http-post
-	rpc.Post("/http", func(c *fiber.Ctx) error {
-		reader := c.Context().RequestBodyStream()
-		writer := c.Response().BodyWriter()
-
-		res := NewRPCRequest(reader).Call()
-		io.Copy(writer, res)
-
-		return nil
-	})
-
-	app.Server().StreamRequestBody = true
-
-	go gracefulShutdown(app)
-	go autoPersist(time.Minute * 5)
-
-	log.Fatal(app.Listen(fmt.Sprintf(":%d", port)))
 }
 
-func gracefulShutdown(app *fiber.App) {
+func RunBlocking(port int, frontend fs.FS, dbPath string) {
+	var mdb internal.MemoryDB
+	mdb.Restore()
+
+	db, err := sql.Open("sqlite", dbPath)
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	err = dbutils.AutoMigrate(context.Background(), db)
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	mq := internal.NewMessageQueue()
+	go mq.Subscriber()
+
+	srv := newServer(serverConfig{
+		frontend: frontend,
+		port:     port,
+		mdb:      &mdb,
+		mq:       mq,
+		db:       db,
+	})
+
+	go gracefulShutdown(srv, &mdb)
+	go autoPersist(time.Minute*5, &mdb)
+
+	log.Fatal(srv.ListenAndServe())
+}
+
+func newServer(c serverConfig) *http.Server {
+	service := ytdlpRPC.Container(c.mdb, c.mq)
+	rpc.Register(service)
+
+	r := chi.NewRouter()
+
+	r.Use(cors.AllowAll().Handler)
+	r.Use(middleware.Logger)
+
+	app := http.FileServer(http.FS(c.frontend))
+
+	r.Mount("/", app)
+
+	// Archive routes
+	r.Route("/archive", func(r chi.Router) {
+		r.Use(middlewares.Authenticated)
+		r.Post("/downloaded", handlers.ListDownloaded)
+		r.Post("/delete", handlers.DeleteFile)
+		r.Get("/d/{id}", handlers.SendFile)
+	})
+
+	// Authentication routes
+	r.Route("/auth", func(r chi.Router) {
+		r.Post("/login", handlers.Login)
+		r.Get("/logout", handlers.Logout)
+	})
+
+	// RPC handlers
+	r.Route("/rpc", ytdlpRPC.ApplyRouter())
+
+	// REST API handlers
+	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mdb, c.mq))
+
+	return &http.Server{
+		Addr:    fmt.Sprintf(":%d", c.port),
+		Handler: r,
+	}
+}
+
+func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 	ctx, stop := signal.NotifyContext(context.Background(),
 		os.Interrupt,
 		syscall.SIGTERM,
@@ -113,12 +118,12 @@ func gracefulShutdown(app *fiber.App) {
 		defer func() {
 			db.Persist()
 			stop()
-			app.ShutdownWithTimeout(time.Second * 5)
+			srv.Shutdown(context.TODO())
 		}()
 	}()
 }
 
-func autoPersist(d time.Duration) {
+func autoPersist(d time.Duration, db *internal.MemoryDB) {
 	for {
 		db.Persist()
 		time.Sleep(d)

server/service.go

@@ -1,136 +0,0 @@
-package server
-
-import (
-	"log"
-
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/updater"
-)
-
-type Service int
-
-type Running []ProcessResponse
-type Pending []string
-
-type NoArgs struct{}
-
-type Args struct {
-	Id     string
-	URL    string
-	Params []string
-}
-
-type DownloadSpecificArgs struct {
-	Id     string
-	URL    string
-	Path   string
-	Rename string
-	Params []string
-}
-
-// Exec spawns a Process.
-// The result of the execution is the newly spawned process Id.
-func (t *Service) Exec(args DownloadSpecificArgs, result *string) error {
-	log.Println("Spawning new process for", args.URL)
-	p := Process{mem: &db, url: args.URL, params: args.Params}
-	p.Start(args.Path, args.Rename)
-	*result = p.id
-	return nil
-}
-
-// Progess retrieves the Progress of a specific Process given its Id
-func (t *Service) Progess(args Args, progress *DownloadProgress) error {
-	proc, err := db.Get(args.Id)
-	if err != nil {
-		return err
-	}
-	*progress = proc.Progress
-	return nil
-}
-
-// Progess retrieves the Progress of a specific Process given its Id
-func (t *Service) Formats(args Args, progress *DownloadFormats) error {
-	var err error
-	p := Process{url: args.URL}
-	*progress, err = p.GetFormatsSync()
-	return err
-}
-
-// Pending retrieves a slice of all Pending/Running processes ids
-func (t *Service) Pending(args NoArgs, pending *Pending) error {
-	*pending = *db.Keys()
-	return nil
-}
-
-// Running retrieves a slice of all Processes progress
-func (t *Service) Running(args NoArgs, running *Running) error {
-	*running = *db.All()
-	return nil
-}
-
-// Kill kills a process given its id and remove it from the memoryDB
-func (t *Service) Kill(args string, killed *string) error {
-	log.Println("Trying killing process with id", args)
-	proc, err := db.Get(args)
-
-	if err != nil {
-		return err
-	}
-	if proc != nil {
-		err = proc.Kill()
-	}
-
-	db.Delete(proc.id)
-	return err
-}
-
-// KillAll kills all process unconditionally and removes them from
-// the memory db
-func (t *Service) KillAll(args NoArgs, killed *string) error {
-	log.Println("Killing all spawned processes", args)
-	keys := db.Keys()
-	var err error
-	for _, key := range *keys {
-		proc, err := db.Get(key)
-		if err != nil {
-			return err
-		}
-		if proc != nil {
-			proc.Kill()
-		}
-	}
-	return err
-}
-
-// Remove a process from the db rendering it unusable if active
-func (t *Service) Clear(args string, killed *string) error {
-	log.Println("Clearing process with id", args)
-	db.Delete(args)
-	return nil
-}
-
-// FreeSpace gets the available from package sys util
-func (t *Service) FreeSpace(args NoArgs, free *uint64) error {
-	freeSpace, err := sys.FreeSpace()
-	*free = freeSpace
-	return err
-}
-
-// Return a flattned tree of the download directory
-func (t *Service) DirectoryTree(args NoArgs, tree *[]string) error {
-	dfsTree, err := sys.DirectoryTree()
-	*tree = *dfsTree
-	return err
-}
-
-// Updates the yt-dlp binary using its builtin function
-func (t *Service) UpdateExecutable(args NoArgs, updated *bool) error {
-	log.Println("Updating yt-dlp executable to the latest release")
-	err := updater.UpdateExecutable()
-	if err != nil {
-		*updated = true
-		return err
-	}
-	*updated = false
-	return err
-}

server/sys/fs.go

@@ -14,7 +14,7 @@ import (
 // FreeSpace gets the available Bytes writable to download directory
 func FreeSpace() (uint64, error) {
 	var stat unix.Statfs_t
-	unix.Statfs(config.Instance().GetConfig().DownloadPath, &stat)
+	unix.Statfs(config.Instance().DownloadPath, &stat)
 	return (stat.Bavail * uint64(stat.Bsize)), nil
 }
 
@@ -26,17 +26,13 @@ func DirectoryTree() (*[]string, error) {
 		children []Node
 	}
 
-	rootPath := config.Instance().GetConfig().DownloadPath
+	rootPath := config.Instance().DownloadPath
 
-	stack := internal.Stack[Node]{
+	stack := internal.NewStack[Node]()
-		Nodes: make([]*internal.Node[Node], 5),
-	}
 	flattened := make([]string, 0)
 
-	root := Node{path: rootPath}
+	stack.Push(Node{path: rootPath})
-	stack.Push(&internal.Node[Node]{
+
-		Value: root,
-	})
 	flattened = append(flattened, rootPath)
 
 	for stack.IsNotEmpty() {
@@ -51,9 +47,7 @@ func DirectoryTree() (*[]string, error) {
 
 			if entry.IsDir() {
 				current.children = append(current.children, childNode)
-				stack.Push(&internal.Node[Node]{
+				stack.Push(childNode)
-					Value: childNode,
-				})
 				flattened = append(flattened, childNode.path)
 			}
 		}

server/updater/forced_update.go

@@ -1,45 +0,0 @@
-package updater
-
-import (
-	"io"
-	"log"
-	"net/http"
-
-	"github.com/goccy/go-json"
-)
-
-const (
-	gitHubAPILatest   = "https://api.github.com/repos/yt-dlp/yt-dlp/releases/latest"
-	gitHubAPIDownload = "https://api.github.com/repos/yt-dlp/yt-dlp/releases/download"
-)
-
-var (
-	client = &http.Client{
-		CheckRedirect: http.DefaultClient.CheckRedirect,
-	}
-)
-
-func getLatestReleaseTag() (string, error) {
-	res, err := client.Get(gitHubAPILatest)
-	if err != nil {
-		log.Println("Cannot get release tag from GitHub API")
-		return "", err
-	}
-	defer res.Body.Close()
-
-	body, err := io.ReadAll(res.Body)
-
-	if err != nil {
-		log.Println("Cannot parse response from GitHub API")
-		return "", err
-	}
-
-	tag := ReleaseLatestResponse{}
-	json.Unmarshal(body, &tag)
-
-	return tag.TagName, nil
-}
-
-func ForceUpdate() {
-	getLatestReleaseTag()
-}

server/updater/types.go

@@ -1,6 +0,0 @@
-package updater
-
-type ReleaseLatestResponse struct {
-	Name    string `json:"name"`
-	TagName string `json:"tag_name"`
-}

server/updater/update.go

@@ -6,13 +6,14 @@ import (
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
-var path = config.Instance().GetConfig().DownloaderPath
-
 // Update using the builtin function of yt-dlp
 func UpdateExecutable() error {
-	cmd := exec.Command(path, "-U")
+	cmd := exec.Command(config.Instance().DownloaderPath, "-U")
-	cmd.Start()
 
-	err := cmd.Wait()
+	err := cmd.Start()
+	if err != nil {
 		return err
+	}
+
+	return cmd.Wait()
 }

server/utils/cookie.go

@@ -0,0 +1,5 @@
+package utils
+
+const (
+	TOKEN_COOKIE_NAME = "jwt-yt-dlp-webui"
+)