download process: added optimistic update.

code refactoring

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

@@ -25,7 +25,7 @@ jobs:
         # v3.1.2
         uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
         with:
-          cosign-release: 'v1.13.1'
+          cosign-release: 'v1.13.6'
 
       - name: Set up QEMU for ARM emulation
         # v2.2.0
@@ -58,6 +58,8 @@ jobs:
           images: |
            ghcr.io/${{ github.repository }}
            docker.io/${{ secrets.DOCKER_HUB_USERNAME }}/yt-dlp-webui
+          tags: |
+            type=raw,value=latest
 
       - name: Build and push Docker image
         id: build-and-push
@@ -66,9 +68,9 @@ jobs:
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64
+          platforms: linux/amd64,linux/arm64
-          tags: ${{ secrets.DOCKER_HUB_USERNAME }}/yt-dlp-webui:latest
+          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels}}
 
       - name: Sign the published Docker image
         env:

.gitignore

@@ -1,6 +1,4 @@
 dist
-package-lock.json
-pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
 .env
@@ -14,3 +12,7 @@ build/
 yt-dlp-webui
 session.dat
 config.yml
+cookies.txt
+__debug*
+ui/
+.idea

.vscode/launch.json

@@ -5,11 +5,11 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "name": "Launch file",
+            "name": "go",
             "type": "go",
             "request": "launch",
             "mode": "debug",
-            "program": "${file}"
+            "program": "main.go"
         },
         {
             "type": "chrome",

Dockerfile

@@ -1,17 +1,30 @@
-FROM golang:1.20-alpine AS build
+# Node (pnpm) ------------------------------------------------------------------
-
+FROM node:20-slim AS ui
-RUN apk update && \
+ENV PNPM_HOME="/pnpm"
-    apk add nodejs npm go
+ENV PATH="$PNPM_HOME:$PATH"
-
+RUN corepack enable
 COPY . /usr/src/yt-dlp-webui
 
 WORKDIR /usr/src/yt-dlp-webui/frontend
-RUN npm install
+
-RUN npm run build
+RUN rm -rf node_modules
+
+RUN pnpm install
+RUN pnpm run build
+# -----------------------------------------------------------------------------
+
+# Go --------------------------------------------------------------------------
+FROM golang AS build
 
 WORKDIR /usr/src/yt-dlp-webui
-RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
 
+COPY . .
+COPY --from=ui /usr/src/yt-dlp-webui/frontend /usr/src/yt-dlp-webui/frontend
+
+RUN CGO_ENABLED=0 GOOS=linux go build -o yt-dlp-webui
+# -----------------------------------------------------------------------------
+
+# dependencies ----------------------------------------------------------------
 FROM alpine:edge
 
 VOLUME /downloads /config
@@ -26,4 +39,4 @@ COPY --from=build /usr/src/yt-dlp-webui/yt-dlp-webui /app
 ENV JWT_SECRET=secret
 
 EXPOSE 3033
-ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml" ]
+ENTRYPOINT [ "./yt-dlp-webui" , "--out", "/downloads", "--conf", "/config/config.yml", "--db", "/config/local.db" ]

Makefile

@@ -6,11 +6,11 @@ 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=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o build/yt-dlp-webui_linux-arm64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARM=6 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv6 main.go
+	CGO_ENABLED=0 GOOS=linux GOARM=7 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv7 main.go
 
 clean:
 	rm -rf build

README.md

@@ -1,3 +1,8 @@
+> [!IMPORTANT]
+> Major frontend refactoring in progress.  
+> I won't add features or fix minor issues until completition.
+---
+
 # yt-dlp Web UI
 
 A not so terrible web ui for yt-dlp.  
@@ -15,12 +20,13 @@ 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
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```
 
+[app.webm](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
+
+
 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
 
@@ -75,20 +81,10 @@ The currently avaible settings are:
 
 ## Format selection
 
-![fs1](https://i.ibb.co/8dgS6ym/image.png)
-
 This feature is disabled by default as this intended to be used to retrieve the best quality automatically.
 
 To enable it just go to the settings page and enable the **Enable video/audio formats selection** flag!
 
-Future releases will have:
--   ~~Multi download~~ *done*
--   ~~Exctract audio~~ *done*
--   ~~Format selection~~ *done*
--   ~~Download archive~~ *done*
--   ~~ARM Build~~ *done available through ghcr.io*
--   Playlist support
-
 ## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
     - You must set the server ip address in the settings section (gear icon).
@@ -97,7 +93,6 @@ Future releases will have:
 
 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
 ```sh
-# recomended for ARM and x86 devices 
 docker pull marcobaobao/yt-dlp-webui
 docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
 ```
@@ -167,6 +162,8 @@ Usage yt-dlp-webui:
         yt-dlp executable path (default "yt-dlp")
   -out string
         Where files will be saved (default ".")
+  -host string
+        Host where server will listen at (default "0.0.0.0")
   -port int
         Port where server will listen at (default 3033)
   -qs int
@@ -185,16 +182,31 @@ The config file **will overwrite what have been passed as cli argument**.
 # Simple configuration file for yt-dlp webui
 
 ---
-port: 8989
+# Host where server will listen at (default: "0.0.0.0")
-downloadPath: /home/ren/archive
+#host: 0.0.0.0
-downloaderPath: /usr/local/bin/yt-dlp
 
-# Optional settings
+# Port where server will listen at (default: 3033)
+port: 8989
+
+# Directory where downloaded files will be stored (default: ".")
+downloadPath: /home/ren/archive
+
+# [optional] Enable RPC authentication (requires username and password)
 require_auth: true
 username: my_username
 password: my_random_secret
 
+# [optional] The download queue size (default: 8)
 queue_size: 4
+
+# [optional] Full path to the yt-dlp (default: "yt-dlp")
+downloaderPath: /usr/local/bin/yt-dlp
+
+# [optional] Directory where the log file will be stored (default: ".")
+#log_path: .
+
+# [optional] Directory where the session database file will be stored (default: ".")
+#session_file_path: .
 ```
 
 ### Systemd integration
@@ -248,12 +260,5 @@ Just as an overview, these are the available methods:
 
 For more information open an issue on GitHub and I will provide more info ASAP.
 
-## FAQ
--   **Will it availabe for Raspberry Pi/ generic ARM devices?**
-    - Yes, it's cross platform :)
-      If you plan to use it on a Raspberry Pi ensure to have fast and durable storage.
--   **Why the docker image is so heavy?**
-    - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
-    - **Update**: Since Golang migration and Multi-Stage builds the Docker image is now 75MB circa. A reduction of over 400% in size :D.
 ## What yt-dlp-webui is not
 `yt-dlp-webui` isn't your ordinary website where to download stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.

examples/Caddyfile

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

examples/nginx.conf

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

frontend/index.html

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

frontend/package.json

@@ -8,31 +8,31 @@
   },
   "author": "marcopeocchi",
   "license": "MPL-2.0",
+  "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.6",
+    "@fontsource/roboto": "^5.0.8",
-    "@mui/icons-material": "^5.11.16",
+    "@fontsource/roboto-mono": "^5.0.16",
-    "@mui/material": "^5.13.5",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "fp-ts": "^2.16.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-router-dom": "^6.21.2",
-    "react-router-dom": "^6.13.0",
     "recoil": "^0.7.7",
-    "rxjs": "^7.8.1",
+    "rxjs": "^7.8.1"
-    "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.0.4",
+    "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@types/node": "^20.3.1",
+    "@types/node": "^20.11.4",
-    "@types/react": "^18.2.13",
+    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.6",
+    "@types/react-dom": "^18.2.18",
-    "@types/react-helmet": "^6.1.6",
+    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.2",
+    "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
+    "typescript": "^5.4.3",
-    "buffer": "^6.0.3",
+    "vite": "^5.2.6",
-    "typescript": "^5.1.3",
+    "million": "^3.0.6"
-    "vite": "^4.4.7"
   }
 }

frontend/src/Layout.tsx

@@ -1,10 +1,10 @@
 import { ThemeProvider } from '@emotion/react'
+import ArchiveIcon from '@mui/icons-material/Archive'
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 import Dashboard from '@mui/icons-material/Dashboard'
-import DownloadIcon from '@mui/icons-material/Download'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
-import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
+import TerminalIcon from '@mui/icons-material/Terminal'
 import { Box, createTheme } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
@@ -17,24 +17,22 @@ import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
 import { useMemo, useState } from 'react'
-import { Helmet } from 'react-helmet'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
-import { connectedState } from './atoms/status'
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
-import FreeSpaceIndicator from './components/FreeSpaceIndicator'
+import Footer from './components/Footer'
 import Logout from './components/Logout'
 import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
+import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
 
   const settings = useRecoilValue(settingsState)
-  const isConnected = useRecoilValue(connectedState)
 
   const mode = settings.theme
   const theme = useMemo(() =>
@@ -50,14 +48,11 @@ export default function Layout() {
 
   const toggleDrawer = () => setOpen(state => !state)
 
+  const { i18n } = useI18n()
+
   return (
     <ThemeProvider theme={theme}>
-      <SocketSubscriber>
+      <SocketSubscriber />
-        <Helmet>
-          <title>
-            {settings.appTitle}
-          </title>
-        </Helmet>
       <Box sx={{ display: 'flex' }}>
         <CssBaseline />
         <AppBar position="absolute" open={open}>
@@ -83,17 +78,6 @@ export default function Layout() {
             >
               {settings.appTitle}
             </Typography>
-              <FreeSpaceIndicator />
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap',
-              }}>
-                <SettingsEthernet />
-                <span>
-                  &nbsp;{isConnected ? settings.serverAddr : 'not connected'}
-                </span>
-              </div>
           </Toolbar>
         </AppBar>
         <Drawer variant="permanent" open={open}>
@@ -121,7 +105,7 @@ export default function Layout() {
                 <ListItemIcon>
                   <Dashboard />
                 </ListItemIcon>
-                  <ListItemText primary="Home" />
+                <ListItemText primary={i18n.t('homeButtonLabel')} />
               </ListItemButton>
             </Link>
             <Link to={'/archive'} style={
@@ -132,9 +116,22 @@ export default function Layout() {
             }>
               <ListItemButton>
                 <ListItemIcon>
-                    <DownloadIcon />
+                  <ArchiveIcon />
                 </ListItemIcon>
-                  <ListItemText primary="Archive" />
+                <ListItemText primary={i18n.t('archiveButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/log'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <TerminalIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('logsTitle')} />
               </ListItemButton>
             </Link>
             <Link to={'/settings'} style={
@@ -147,7 +144,7 @@ export default function Layout() {
                 <ListItemIcon>
                   <SettingsIcon />
                 </ListItemIcon>
-                  <ListItemText primary="Settings" />
+                <ListItemText primary={i18n.t('settingsButtonLabel')} />
               </ListItemButton>
             </Link>
             <ThemeToggler />
@@ -166,8 +163,8 @@ export default function Layout() {
           <Outlet />
         </Box>
       </Box>
+      <Footer />
       <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 (one per line)
     statusTitle: Status
     statusReady: Ready
     selectFormatButton: Select format
@@ -35,15 +35,77 @@ languages:
     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
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+  german:
+    urlInput: Video URL
+    statusTitle: Status
+    statusReady: Bereit
+    selectFormatButton: Format auswählen
+    startButton: Start
+    abortAllButton: Alle Abbrechen
+    updateBinButton: yt-dlp Binärdatei aktualisieren
+    darkThemeButton: Dunkel Modus
+    lightThemeButton: Hell Modus
+    settingsAnchor: Einstellungen
+    serverAddressTitle: Server Adresse
+    serverPortTitle: Port
+    extractAudioCheckbox: Audio extrahieren
+    noMTimeCheckbox: Datei-Änderungszeitpunkt nicht festlegen
+    bgReminder: Sobald Sie diese Seite schließen, wird der Download im Hintergrund fortgesetzt.
+    toastConnected: 'Verbunden mit '
+    toastUpdated: yt-dlp Binärdatei aktualisiert!
+    formatSelectionEnabler: Video/Audio Format auswählbar
+    themeSelect: 'Modus'
+    languageSelect: 'Sprache'
+    overridesAnchor: Überschreibungen
+    pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
+    filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
+    customFilename: Custom filemame (leave blank to use default)
+    customPath: Benutzerdefinierter Pfad
+    customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (viel Macht = viel Verantwortung)
+    customArgsInput: Benutzerdefinierte yt-dlp Argumente
+    rpcConnErr: Fehler beim Verbinden mit RPC Server
+    splashText: Keine aktiven Downloads
+    archiveTitle: Archiv
+    clipboardAction: URL in Zwischenablage kopiert
+    playlistCheckbox: Playlist herunterladen (es wird einige Zeit dauern, nach dem Absenden können Sie dieses Fenster schließen)
+    restartAppMessage: Erfordert ein Neuladen der Seite, um wirksam zu werden
+    servedFromReverseProxyCheckbox: Ist hinter einem Reverse Proxy Unterordner
+    newDownloadButton: Neuer Download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archiv
+    settingsButtonLabel: Einstellungen
+    rpcAuthenticationLabel: RPC Authentifizierung
+    themeTogglerLabel: Modus Umschalter
+    loadingLabel: Lädt...
+    appTitle: App Titel
+    savedTemplates: Gespeicherte Vorlage
+    templatesEditor: Vorlagen Bearbeiter
+    templatesEditorNameLabel: Vorlagen Name
+    templatesEditorContentLabel: Vorlagen Inhalt
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   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: Abort All
+    abortAllButton: Tout arrêter
-    updateBinButton: Mettre à jour le binaire yt-dlp
+    updateBinButton: Mettre à jour l'exécutable yt-dlp
     darkThemeButton: Thème sombre
     lightThemeButton: Thème clair
     settingsAnchor: Paramètres
@@ -51,15 +113,15 @@ languages:
     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 se poursuivra en arrière-plan.
+    bgReminder: Une fois que vous aurez fermé cette page, le téléchargement continuera en arrière-plan.
     toastConnected: 'Connecté à '
-    toastUpdated: Mise à jour du binaire yt-dlp !
+    toastUpdated: L'exécutable yt-dlp a été mis à jour !
-    formatSelectionEnabler: Active la sélection des formats vidéo/audio
+    formatSelectionEnabler: Activer la sélection des formats vidéo/audio
-    themeSelect: 'Theme'
+    themeSelect: 'Thème'
     languageSelect: 'Langue'
-    overridesAnchor: Surcharges
+    overridesAnchor: Remplacer
-    pathOverrideOption: Activation de la surcharge du chemin de sortie
+    pathOverrideOption: Activer le remplacement du chemin de sortie
-    filenameOverrideOption: Active la surcharge du nom du fichier 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)
@@ -71,9 +133,24 @@ languages:
     playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
     restartAppMessage: Nécessite un rechargement de la page pour prendre effet
     servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
-    appTitle: App title
+    notConnectedText: not connected
+    settingsLabel: Settings
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
+    appTitle: Nom de l'application
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   italian:
-    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
+    urlInput: URL Video (uno per linea)
     statusTitle: Stato
     startButton: Inizia
     statusReady: Pronto
@@ -105,10 +182,23 @@ languages:
     clipboardAction: URL copiato negli appunti
     playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
     restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
-    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy
+    newDownloadButton: Nuovo download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: Titolo applicazione
+    savedTemplates: Template salvati
+    templatesEditor: Editor template
+    templatesEditorNameLabel: Nome template
+    templatesEditorContentLabel: Contentunto template
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   chinese:
-    urlInput: YouTube 或其他受支持服务的视频网址
+    urlInput: 视频 URL
     statusTitle: 状态
     statusReady: 就绪
     selectFormatButton: 选择格式
@@ -139,9 +229,23 @@ languages:
     splashText: 没有正在进行的下载
     archiveTitle: 归档
     clipboardAction: 复制 URL 到剪贴板
-    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
+    playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
-    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    restartAppMessage: 需要刷新页面才能生效
-    appTitle: App title
+    servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+    newDownloadButton: 新下载
+    homeButtonLabel: 主页
+    archiveButtonLabel: 归档
+    settingsButtonLabel: 设置
+    rpcAuthenticationLabel: RPC 身份验证
+    themeTogglerLabel: 主题切换
+    loadingLabel: 正在加载…
+    appTitle: App 标题
+    savedTemplates: 保存模板
+    templatesEditor: 模板编辑器
+    templatesEditorNameLabel: 模板名称
+    templatesEditorContentLabel: 模板内容
+    logsTitle: '日志'
+    awaitingLogs: '正在等待日志…'
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -175,7 +279,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -209,7 +326,20 @@ languages:
     clipboardAction: URL скопирован в буфер обмена
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -243,7 +373,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -278,7 +421,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -312,7 +468,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -346,7 +515,20 @@ languages:
     clipboardAction: URL скопійовано в буфер обміну
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -380,4 +562,17 @@ languages:
     clipboardAction: Adres URL zostanie skopiowany do schowka
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'

frontend/src/atoms/downloadTemplate.ts

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

frontend/src/atoms/downloads.ts

@@ -1,7 +1,22 @@
-import { atom } from 'recoil'
+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 activeDownloadsState = atom<RPCResult[] | undefined>({
+export const downloadsState = atom<O.Option<RPCResult[]>>({
-  key: 'activeDownloadsState',
+  key: 'downloadsState',
-  default: undefined
+  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

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

frontend/src/atoms/rpc.ts

@@ -5,8 +5,10 @@ import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
 export const rpcClientState = selector({
   key: 'rpcClientState',
   get: ({ get }) =>
-    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+    new RPCClient(
-  set: ({ get }) =>
+      get(rpcHTTPEndpoint),
-    new RPCClient(get(rpcHTTPEndpoint), get(rpcWebSocketEndpoint)),
+      get(rpcWebSocketEndpoint),
+      localStorage.getItem('token') ?? ''
+    ),
   dangerouslyAllowMutability: true,
 })

frontend/src/atoms/settings.ts

@@ -12,6 +12,7 @@ export const languages = [
   'catalan',
   'ukrainian',
   'polish',
+  'german'
 ] as const
 
 export type Language = (typeof languages)[number]
@@ -73,7 +74,7 @@ export const serverPortState = atom<number>({
 
 export const latestCliArgumentsState = atom<string>({
   key: 'latestCliArgumentsState',
-  default: localStorage.getItem('cli-args') || '',
+  default: localStorage.getItem('cli-args') || '--no-mtime',
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('cli-args', a.toString()))
@@ -127,7 +128,7 @@ export const listViewState = atom({
 
 export const servedFromReverseProxyState = atom({
   key: 'servedFromReverseProxyState',
-  default: localStorage.getItem('reverseProxy') === "true",
+  default: localStorage.getItem('reverseProxy') === "true" || window.location.port == "",
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('reverseProxy', a.toString()))
@@ -153,7 +154,7 @@ export const serverAddressAndPortState = selector({
 export const serverURL = selector({
   key: 'serverURL',
   get: ({ get }) =>
-    `${window.location.protocol}//${get(serverAddressState)}:${get(serverPortState)}`
+    `${window.location.protocol}//${get(serverAddressAndPortState)}`
 })
 
 export const rpcWebSocketEndpoint = selector({
@@ -172,6 +173,15 @@ export const rpcHTTPEndpoint = selector({
   }
 })
 
+export const cookiesState = atom({
+  key: 'cookiesState',
+  default: localStorage.getItem('yt-dlp-cookies') ?? '',
+  effects: [
+    ({ onSet }) =>
+      onSet(c => localStorage.setItem('yt-dlp-cookies', c))
+  ]
+})
+
 export const themeSelector = selector<ThemeNarrowed>({
   key: 'themeSelector',
   get: ({ get }) => {

frontend/src/atoms/status.ts

@@ -1,13 +1,6 @@
 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
@@ -23,18 +16,20 @@ export const isDownloadingState = atom({
   default: false
 })
 
-// export const freeSpaceBytesState = selector({
+export const freeSpaceBytesState = selector({
-//   key: 'freeSpaceBytesState',
+  key: 'freeSpaceBytesState',
-//   get: async ({ get }) => {
+  get: async ({ get }) => {
-//     const res = await get(rpcClientState).freeSpace()
+    const res = await get(rpcClientState).freeSpace()
-//     return res.result
+      .catch(() => ({ result: 0 }))
-//   }
+    return res.result
-// })
+  }
+})
 
 export const availableDownloadPathsState = selector({
   key: 'availableDownloadPathsState',
   get: async ({ get }) => {
     const res = await get(rpcClientState).directoryTree()
+      .catch(() => ({ result: [] }))
     return res.result
   }
 })

frontend/src/atoms/toast.ts

@@ -1,7 +1,7 @@
 import { AlertColor } from '@mui/material'
 import { atom } from 'recoil'
 
-type Toast = {
+export type Toast = {
   open: boolean,
   message: string
   autoClose: boolean

frontend/src/atoms/ui.ts

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

frontend/src/components/CookiesTextField.tsx

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

frontend/src/components/DownloadCard.tsx

@@ -15,8 +15,9 @@ import {
   Stack,
   Typography
 } from '@mui/material'
+import { useCallback } from 'react'
 import { RPCResult } from '../types'
-import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, formatSize } from '../utils'
 
 type Props = {
   download: RPCResult
@@ -34,11 +35,17 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const isCompleted = () => download.progress.percentage === '-1'
+  const isCompleted = useCallback(
+    () => download.progress.percentage === '-1',
+    [download.progress.percentage]
+  )
 
-  const percentageToNumber = () => isCompleted()
+  const percentageToNumber = useCallback(
+    () => isCompleted()
       ? 100
-    : Number(download.progress.percentage.replace('%', ''))
+      : Number(download.progress.percentage.replace('%', '')),
+    [download.progress.percentage, isCompleted]
+  )
 
   return (
     <Card>
@@ -54,14 +61,22 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
           /> :
           <Skeleton variant="rectangular" height={180} />
         }
+        {download.progress.percentage ?
+          <LinearProgress
+            variant="determinate"
+            value={percentageToNumber()}
+            color={isCompleted() ? "success" : "primary"}
+          /> :
+          null
+        }
         <CardContent>
           {download.info.title !== '' ?
             <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(download.info.title, 54)}
+              {ellipsis(download.info.title, 100)}
             </Typography> :
             <Skeleton />
           }
-          <Stack direction="row" spacing={1} py={2}>
+          <Stack direction="row" spacing={0.5} py={1}>
             <Chip
               label={
                 isCompleted()
@@ -79,18 +94,10 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
               {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
             </Typography>
             <Typography>
-              {roundMiB(download.info.filesize_approx ?? 0)}
+              {formatSize(download.info.filesize_approx ?? 0)}
             </Typography>
             <Resolution resolution={download.info.resolution} />
           </Stack>
-          {download.progress.percentage ?
-            <LinearProgress
-              variant="determinate"
-              value={percentageToNumber()}
-              color={isCompleted() ? "secondary" : "primary"}
-            /> :
-            null
-          }
         </CardContent>
       </CardActionArea>
       <CardActions>

frontend/src/components/DownloadDialog.tsx

@@ -1,7 +1,9 @@
 import { FileUpload } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import {
+  Autocomplete,
   Backdrop,
+  Box,
   Button,
   Checkbox,
   Container,
@@ -10,12 +12,8 @@ import {
   Grid,
   IconButton,
   InputAdornment,
-  InputLabel,
-  MenuItem,
   Paper,
-  Select,
+  TextField
-  TextField,
-  styled
 } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
 import Dialog from '@mui/material/Dialog'
@@ -23,16 +21,19 @@ import Slide from '@mui/material/Slide'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { TransitionProps } from '@mui/material/transitions'
-import { Buffer } from 'buffer'
 import {
+  FC,
+  Suspense,
   forwardRef,
+  useEffect,
   useMemo,
   useRef,
   useState,
   useTransition
 } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
-import { settingsState } from '../atoms/settings'
+import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { latestCliArgumentsState, settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
 import { useI18n } from '../hooks/useI18n'
@@ -40,6 +41,7 @@ import { useRPC } from '../hooks/useRPC'
 import { CliArguments } from '../lib/argsParser'
 import type { DLMetadata } from '../types'
 import { isValidURL, toFormatArgs } from '../utils'
+import ExtraDownloadOptions from './ExtraDownloadOptions'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {
@@ -53,83 +55,83 @@ const Transition = forwardRef(function Transition(
 type Props = {
   open: boolean
   onClose: () => void
-  onDownloadStart: () => void
+  onDownloadStart: (url: string) => void
 }
 
-export default function DownloadDialog({
+const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
-  open,
-  onClose,
-  onDownloadStart
-}: Props) {
-  // recoil state
   const settings = useRecoilValue(settingsState)
   const isConnected = useRecoilValue(connectedState)
   const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+  const downloadTemplate = useRecoilValue(downloadTemplateState)
+  const savedTemplates = useRecoilValue(savedTemplatesState)
 
-  // 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 [, setCliArgs] = useRecoilState(latestCliArgumentsState)
 
-  const [fileNameOverride, setFilenameOverride] = useState('')
+  const [downloadPath, setDownloadPath] = useState('')
+
+  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
+    filenameTemplateState
+  )
 
   const [url, setUrl] = useState('')
-  const [workingUrl, setWorkingUrl] = useState('')
 
   const [isPlaylist, setIsPlaylist] = useState(false)
 
-  // memos
+  const argsBuilder = useMemo(() =>
-  const cliArgs = useMemo(() =>
     new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
   )
 
-  // context
   const { i18n } = useI18n()
   const { client } = useRPC()
 
-  // refs
   const urlInputRef = useRef<HTMLInputElement>(null)
   const customFilenameInputRef = useRef<HTMLInputElement>(null)
 
-  // transitions
   const [isPending, startTransition] = useTransition()
 
+  useEffect(() => {
+    setCustomArgs('')
+  }, [open])
+
   /**
     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
   */
-  const sendUrl = (immediate?: string) => {
+  const sendUrl = async (immediate?: string) => {
+    for (const line of url.split('\n')) {
       const codes = new Array<string>()
       if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
       if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
       if (pickedBestFormat !== '') codes.push(pickedBestFormat)
 
-    client.download(
+      await new Promise(r => setTimeout(r, 10))
-      immediate || url || workingUrl,
+      await client.download({
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
+        url: immediate || line,
-      availableDownloadPaths[downloadPath] ?? '',
+        args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
-      fileNameOverride,
+        pathOverride: downloadPath ?? '',
-      isPlaylist,
+        renameTo: settings.fileRenaming ? filenameTemplate : '',
-    )
+        playlist: isPlaylist,
-
+      })
-    setUrl('')
-    setWorkingUrl('')
 
       setTimeout(() => {
         resetInput()
         setDownloadFormats(undefined)
-      onDownloadStart()
+        onDownloadStart(immediate || line)
       }, 250)
     }
 
+    setUrl('')
+  }
+
   /**
    * Retrive url from input and display the formats selection view
    */
   const sendUrlFormatSelection = () => {
-    setWorkingUrl(url)
     setUrl('')
     setPickedAudioFormat('')
     setPickedVideoFormat('')
@@ -142,45 +144,30 @@ export default function DownloadDialog({
       })
   }
 
-  /**
-   * 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 = () => {
@@ -190,14 +177,7 @@ export default function DownloadDialog({
     }
   }
 
-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  })
-
   return (
-    <div>
     <Dialog
       fullScreen
       open={open}
@@ -223,10 +203,15 @@ export default function DownloadDialog({
           </Typography>
         </Toolbar>
       </AppBar>
+      <Box sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
+      }}>
         <Container sx={{ my: 4 }}>
           <Grid container spacing={2}>
             <Grid item xs={12}>
               <Paper
+                elevation={4}
                 sx={{
                   p: 2,
                   display: 'flex',
@@ -235,6 +220,7 @@ export default function DownloadDialog({
               >
                 <Grid container>
                   <TextField
+                    multiline
                     fullWidth
                     ref={urlInputRef}
                     label={i18n.t('urlInput')}
@@ -248,11 +234,12 @@ export default function DownloadDialog({
                       endAdornment: (
                         <InputAdornment position="end">
                           <label htmlFor="icon-button-file">
-                            <Input
+                            <input
+                              hidden
                               id="icon-button-file"
                               type="file"
                               accept=".txt"
-                              onChange={parseUrlListFile}
+                              onChange={e => parseUrlListFile(e)}
                             />
                             <IconButton
                               color="primary"
@@ -286,14 +273,15 @@ export default function DownloadDialog({
                   }
                   {
                     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={
                           !isConnected ||
                           (settings.formatSelection && downloadFormats != null)
@@ -305,23 +293,55 @@ export default function DownloadDialog({
                     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>
+                <Suspense>
+                  {savedTemplates.length > 0 && <ExtraDownloadOptions />}
+                </Suspense>
                 <Grid container spacing={1} pt={2} justifyContent="space-between">
+                  <Grid item>
+                    <Grid item>
+                      <FormControlLabel
+                        control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                        checked={isPlaylist}
+                        label={i18n.t('playlistCheckbox')}
+                      />
+                    </Grid>
+                    <Grid item>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                          />
+                        }
+                        checked={argsBuilder.extractAudio}
+                        onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                        disabled={settings.formatSelection}
+                        label={i18n.t('extractAudioCheckbox')}
+                      />
+                    </Grid>
+                  </Grid>
                   <Grid item>
                     <Button
                       variant="contained"
@@ -338,13 +358,6 @@ export default function DownloadDialog({
                       }
                     </Button>
                   </Grid>
-                  <Grid item>
-                    <FormControlLabel
-                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
-                      checked={isPlaylist}
-                      label={i18n.t('playlistCheckbox')}
-                    />
-                  </Grid>
                 </Grid>
               </Paper>
             </Grid>
@@ -376,7 +389,9 @@ export default function DownloadDialog({
             pickedAudioFormat={pickedAudioFormat}
           />}
         </Container>
+      </Box>
     </Dialog>
-    </div>
   )
 }
+
+export default DownloadDialog

frontend/src/components/Downloads.tsx

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

frontend/src/components/DownloadsCardView.tsx

@@ -7,7 +7,7 @@ import { useRPC } from '../hooks/useRPC'
 import DownloadCard from './DownloadCard'
 
 const DownloadsCardView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState) ?? []
+  const downloads = useRecoilValue(activeDownloadsState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
@@ -16,17 +16,15 @@ const DownloadsCardView: React.FC = () => {
   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 container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
       {
         downloads.map(download => (
-          <Grid item xs={4} sm={8} md={6} key={download.id}>
+          <Grid item xs={4} sm={8} md={6} xl={4} key={download.id}>
-            <>
             <DownloadCard
               download={download}
               onStop={() => abort(download.id)}
               onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
             />
-            </>
           </Grid>
         ))
       }

frontend/src/components/DownloadsListView.tsx

@@ -1,93 +0,0 @@
-import {
-  Button,
-  Grid,
-  LinearProgress,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from "@mui/material"
-import { useRecoilValue } from 'recoil'
-import { activeDownloadsState } from '../atoms/downloads'
-import { useRPC } from '../hooks/useRPC'
-import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"
-
-
-const DownloadsListView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState) ?? []
-
-  const { client } = useRPC()
-
-  const abort = (id: string) => client.kill(id)
-
-  return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
-      <Grid item xs={12}>
-        <TableContainer component={Paper} sx={{ minHeight: '100%' }} elevation={2}>
-          <Table>
-            <TableHead hidden={downloads.length === 0}>
-              <TableRow>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Title</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Progress</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Speed</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Size</Typography>
-                </TableCell>
-                <TableCell>
-                  <Typography fontWeight={500} fontSize={15}>Actions</Typography>
-                </TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {
-                downloads.map(download => (
-                  <TableRow key={download.id}>
-                    <TableCell>{ellipsis(download.info.title, 80)}</TableCell>
-                    <TableCell>
-                      <LinearProgress
-                        value={
-                          download.progress.percentage === '-1'
-                            ? 100
-                            : Number(download.progress.percentage.replace('%', ''))
-                        }
-                        variant={
-                          download.progress.process_status === 0
-                            ? 'indeterminate'
-                            : 'determinate'
-                        }
-                        color={download.progress.percentage === '-1' ? 'success' : 'primary'}
-                      />
-                    </TableCell>
-                    <TableCell>{formatSpeedMiB(download.progress.speed)}</TableCell>
-                    <TableCell>{roundMiB(download.info.filesize_approx ?? 0)}</TableCell>
-                    <TableCell>
-                      <Button
-                        variant="contained"
-                        size="small"
-                        onClick={() => abort(download.id)}
-                      >
-                        {download.progress.percentage === '-1' ? 'Remove' : 'Stop'}
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              }
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Grid>
-    </Grid>
-  )
-}
-
-export default DownloadsListView

frontend/src/components/DownloadsTableView.tsx

@@ -0,0 +1,128 @@
+import DeleteIcon from '@mui/icons-material/Delete'
+import DownloadIcon from '@mui/icons-material/Download'
+import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
+import StopCircleIcon from '@mui/icons-material/StopCircle'
+import {
+  Box,
+  Grid,
+  IconButton,
+  LinearProgress,
+  LinearProgressProps,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography
+} from "@mui/material"
+import { useRecoilValue } from 'recoil'
+import { activeDownloadsState } from '../atoms/downloads'
+import { useRPC } from '../hooks/useRPC'
+import { formatSize, formatSpeedMiB } from "../utils"
+
+function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center' }}>
+      <Box sx={{ width: '100%', mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography variant="body2" color="text.secondary">{`${Math.round(
+          props.value,
+        )}%`}</Typography>
+      </Box>
+    </Box>
+  )
+}
+
+const DownloadsTableView: React.FC = () => {
+  const downloads = useRecoilValue(activeDownloadsState)
+
+  const { client } = useRPC()
+
+  const abort = (id: string) => client.kill(id)
+
+  return (
+    <TableContainer
+      sx={{ minHeight: '80vh', mt: 4 }}
+      hidden={downloads.length === 0}
+    >
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell width={8}>
+              <Typography fontWeight={500} fontSize={13}>Status</Typography>
+            </TableCell>
+            <TableCell>
+              <Typography fontWeight={500} fontSize={13}>Title</Typography>
+            </TableCell>
+            <TableCell align="right">
+              <Typography fontWeight={500} fontSize={13}>Speed</Typography>
+            </TableCell>
+            <TableCell align="center" width={200}>
+              <Typography fontWeight={500} fontSize={13}>Progress</Typography>
+            </TableCell>
+            <TableCell align="right">
+              <Typography fontWeight={500} fontSize={13}>Size</Typography>
+            </TableCell>
+            <TableCell align="right" width={180}>
+              <Typography fontWeight={500} fontSize={13}>Added on</Typography>
+            </TableCell>
+            <TableCell align="right" width={8}>
+              <Typography fontWeight={500} fontSize={13}>Actions</Typography>
+            </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {
+            downloads.map(download => (
+              <TableRow key={download.id}>
+                <TableCell>
+                  {download.progress.percentage === '-1'
+                    ? <DownloadDoneIcon color="primary" />
+                    : <DownloadIcon color="primary" />
+                  }
+                </TableCell>
+                <TableCell>{download.info.title}</TableCell>
+                <TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
+                <TableCell align="right">
+                  <LinearProgressWithLabel
+                    sx={{ height: '16px' }}
+                    value={
+                      download.progress.percentage === '-1'
+                        ? 100
+                        : Number(download.progress.percentage.replace('%', ''))
+                    }
+                    variant={
+                      download.progress.process_status === 0
+                        ? 'indeterminate'
+                        : 'determinate'
+                    }
+                    color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
+                  />
+                </TableCell>
+                <TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
+                <TableCell align="right">
+                  {new Date(download.info.created_at).toLocaleString()}
+                </TableCell>
+                <TableCell align="right">
+                  <IconButton
+                    size="small"
+                    onClick={() => abort(download.id)}
+                  >
+                    {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
+
+                  </IconButton>
+                </TableCell>
+              </TableRow>
+            ))
+          }
+        </TableBody>
+      </Table>
+    </TableContainer>
+  )
+}
+
+export default DownloadsTableView

frontend/src/components/ExtraDownloadOptions.tsx

@@ -0,0 +1,51 @@
+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"
+            {...props}
+          >
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignContent: 'flex-start',
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+              width: '100%'
+            }}>
+              <Typography>
+                {option.label}
+              </Typography>
+              <Typography variant="subtitle2" color="primary">
+                {option.content}
+              </Typography>
+            </Box>
+          </Box>
+        )}
+        sx={{ width: '100%', mt: 2 }}
+        renderInput={(params) => <TextField {...params} label={i18n.t('savedTemplates')} />}
+      />
+    </>
+  )
+}
+
+export default ExtraDownloadOptions

frontend/src/components/Footer.tsx

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

frontend/src/components/FreeSpaceIndicator.tsx

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

frontend/src/components/HomeActions.tsx

@@ -1,29 +1,65 @@
-import { useState } from 'react'
+import { Suspense, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import { loadingAtom } from '../atoms/ui'
+import { loadingAtom, optimisticDownloadsState } from '../atoms/ui'
+import { useToast } from '../hooks/toast'
 import DownloadDialog from './DownloadDialog'
 import HomeSpeedDial from './HomeSpeedDial'
+import TemplatesEditor from './TemplatesEditor'
 
 const HomeActions: React.FC = () => {
   const [, setIsLoading] = useRecoilState(loadingAtom)
-  const [openDialog, setOpenDialog] = useState(false)
+  const [optimistic, setOptimistic] = useRecoilState(optimisticDownloadsState)
+
+  const [openDownload, setOpenDownload] = useState(false)
+  const [openEditor, setOpenEditor] = useState(false)
+
+  const { pushMessage } = useToast()
+
+  // it's stupid because it will be overriden on the next server tick
+  const handleOptimisticUpdate = (url: string) => setOptimistic([
+    ...optimistic, {
+      id: url,
+      info: {
+        created_at: new Date().toISOString(),
+        thumbnail: '',
+        title: url,
+        url: url
+      },
+      progress: {
+        eta: Number.MAX_SAFE_INTEGER,
+        percentage: '0%',
+        process_status: 0,
+        speed: 0
+      }
+    }
+  ])
 
   return (
     <>
       <HomeSpeedDial
-        onOpen={() => setOpenDialog(true)}
+        onDownloadOpen={() => setOpenDownload(true)}
+        onEditorOpen={() => setOpenEditor(true)}
       />
+      <Suspense>
         <DownloadDialog
-        open={openDialog}
+          open={openDownload}
           onClose={() => {
-          setOpenDialog(false)
+            setOpenDownload(false)
             setIsLoading(true)
           }}
-        onDownloadStart={() => {
+          // TODO: handle optimistic UI update
-          setOpenDialog(false)
+          onDownloadStart={(url) => {
+            handleOptimisticUpdate(url)
+            pushMessage(`Requested ${url}`, 'info')
+            setOpenDownload(false)
             setIsLoading(true)
           }}
         />
+      </Suspense>
+      <TemplatesEditor
+        open={openEditor}
+        onClose={() => setOpenEditor(false)}
+      />
     </>
   )
 }

frontend/src/components/HomeSpeedDial.tsx

@@ -1,6 +1,8 @@
 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 ViewAgendaIcon from '@mui/icons-material/ViewAgenda'
 import {
   SpeedDial,
   SpeedDialAction,
@@ -12,11 +14,12 @@ import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 
 type Props = {
-  onOpen: () => void
+  onDownloadOpen: () => void
+  onEditorOpen: () => void
 }
 
-const HomeSpeedDial: React.FC<Props> = ({ onOpen }) => {
+const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const [, setListView] = useRecoilState(listViewState)
+  const [listView, setListView] = useRecoilState(listViewState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
@@ -26,12 +29,12 @@ const HomeSpeedDial: React.FC<Props> = ({ onOpen }) => {
   return (
     <SpeedDial
       ariaLabel="Home speed dial"
-      sx={{ position: 'absolute', bottom: 32, right: 32 }}
+      sx={{ position: 'absolute', bottom: 64, right: 24 }}
       icon={<SpeedDialIcon />}
     >
       <SpeedDialAction
-        icon={<FormatListBulleted />}
+        icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}
-        tooltipTitle={`Table view`}
+        tooltipTitle={listView ? 'Card view' : 'Table view'}
         onClick={() => setListView(state => !state)}
       />
       <SpeedDialAction
@@ -39,10 +42,15 @@ const HomeSpeedDial: React.FC<Props> = ({ onOpen }) => {
         tooltipTitle={i18n.t('abortAllButton')}
         onClick={abort}
       />
+      <SpeedDialAction
+        icon={<BuildCircleIcon />}
+        tooltipTitle={i18n.t('templatesEditor')}
+        onClick={onEditorOpen}
+      />
       <SpeedDialAction
         icon={<AddCircleIcon />}
-        tooltipTitle={`New download`}
+        tooltipTitle={i18n.t('newDownloadButton')}
-        onClick={onOpen}
+        onClick={onDownloadOpen}
       />
     </SpeedDial>
   )

frontend/src/components/LoadingBackdrop.tsx

@@ -8,7 +8,7 @@ const LoadingBackdrop: React.FC = () => {
   return (
     <Backdrop
       sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-      open={!isLoading}
+      open={isLoading}
     >
       <CircularProgress color="primary" />
     </Backdrop>

frontend/src/components/LogTerminal.tsx

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

frontend/src/components/Logout.tsx

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

frontend/src/components/SocketSubscriber.tsx

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

frontend/src/components/Splash.tsx

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

frontend/src/components/TemplatesEditor.tsx

@@ -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

@@ -4,6 +4,7 @@ import BrightnessAuto from '@mui/icons-material/BrightnessAuto'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { useRecoilState } from 'recoil'
 import { Theme, themeState } from '../atoms/settings'
+import { useI18n } from '../hooks/useI18n'
 
 const ThemeToggler: React.FC = () => {
   const [theme, setTheme] = useRecoilState(themeState)
@@ -17,6 +18,8 @@ const ThemeToggler: React.FC = () => {
   const themes: Theme[] = ['system', 'light', 'dark']
   const currentTheme = themes.indexOf(theme)
 
+  const { i18n } = useI18n()
+
   return (
     <ListItemButton onClick={() => {
       setTheme(themes[(currentTheme + 1) % themes.length])
@@ -24,7 +27,7 @@ const ThemeToggler: React.FC = () => {
       <ListItemIcon>
         {actions[theme]}
       </ListItemIcon>
-      <ListItemText primary="Toggle theme" />
+      <ListItemText primary={i18n.t('themeTogglerLabel')} />
     </ListItemButton>
   )
 }

frontend/src/components/VersionIndicator.tsx

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

frontend/src/index.tsx

@@ -6,6 +6,9 @@ import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
+import '@fontsource/roboto/700.css'
+
+import '@fontsource/roboto-mono'
 
 const root = createRoot(document.getElementById('root')!)
 

frontend/src/lib/argsParser.ts

@@ -1,12 +1,10 @@
 export class CliArguments {
   private _extractAudio: boolean
   private _noMTime: boolean
-  private _proxy: string
 
   constructor(extractAudio = false, noMTime = true) {
     this._extractAudio = extractAudio
     this._noMTime = noMTime
-    this._proxy = ""
   }
 
   public get extractAudio(): boolean {
@@ -46,7 +44,14 @@ export class CliArguments {
     return args.trim()
   }
 
+  private reset() {
+    this._extractAudio = false
+    this._noMTime = false
+  }
+
   public fromString(str: string): CliArguments {
+    this.reset()
+
     if (str) {
       if (str.includes('-x')) {
         this._extractAudio = true

frontend/src/lib/httpClient.ts

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

frontend/src/lib/intl.ts

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

frontend/src/lib/rpcClient.ts

@@ -1,21 +1,33 @@
-import { Observable, share } from 'rxjs'
+import { Observable } from 'rxjs'
 import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from '../types'
 
 import { WebSocketSubject, webSocket } from 'rxjs/webSocket'
 
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
+
 export class RPCClient {
   private seq: number
   private httpEndpoint: string
   private readonly _socket$: WebSocketSubject<any>
+  private readonly token?: string
 
-  constructor(httpEndpoint: string, webSocketEndpoint: string) {
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
     this.seq = 0
     this.httpEndpoint = httpEndpoint
-    this._socket$ = webSocket<any>(webSocketEndpoint)
+    this._socket$ = webSocket<any>({
+      url: token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    })
+    this.token = token
   }
 
   public get socket$(): Observable<RPCResponse<RPCResult[]>> {
-    return this._socket$.asObservable()
+    return this._socket$
   }
 
   private incrementSeq() {
@@ -29,9 +41,19 @@ export class RPCClient {
     })
   }
 
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
   private async sendHTTP<T>(req: RPCRequest) {
     const res = await fetch(this.httpEndpoint, {
       method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
       body: JSON.stringify({
         ...req,
         id: this.incrementSeq(),
@@ -42,33 +64,45 @@ export class RPCClient {
     return data
   }
 
-  public download(
+  public download(req: DownloadRequestArgs) {
-    url: string,
+    if (!req.url) {
-    args: string,
-    pathOverride = '',
-    renameTo = '',
-    playlist?: boolean
-  ) {
-    if (!url) {
       return
     }
-    if (playlist) {
+
+    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,
+          URL: req.url,
-          Params: args.split(" ").map(a => a.trim()),
+          Params: sanitizedArgs,
-          Path: pathOverride,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
         }]
       })
     }
     this.sendHTTP({
       method: 'Service.Exec',
       params: [{
-        URL: url.split("?list").at(0)!,
+        URL: req.url.split('?list').at(0)!,
-        Params: args.split(" ").map(a => a.trim()),
+        Params: sanitizedArgs,
-        Path: pathOverride,
+        Path: req.pathOverride,
-        Rename: renameTo,
+        Rename: req.renameTo || rename,
       }]
     })
   }
@@ -78,7 +112,7 @@ export class RPCClient {
       return this.sendHTTP<DLMetadata>({
         method: 'Service.Formats',
         params: [{
-          URL: url.split("?list").at(0)!,
+          URL: url.split('?list').at(0)!,
         }]
       })
     }

frontend/src/providers/ToasterProvider.tsx

@@ -1,20 +1,22 @@
 import { Alert, Snackbar } from "@mui/material"
 import { useRecoilState } from 'recoil'
-import { toastListState } from '../atoms/toast'
+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: false })))
+        setToasts(t => t.map(t => ({ ...t, open: deletePredicate(t) })))
-      }, 1500)
+      }, 900)
 
       const cleaner = setInterval(() => {
-        setToasts(t => t.filter((x) => (Date.now() - x.createdAt) < 1500))
+        setToasts(t => t.filter(deletePredicate))
-      }, 1750)
+      }, 2005)
 
       return () => {
         clearInterval(closer)
@@ -29,7 +31,7 @@ const Toaster: React.FC = () => {
         <Snackbar
           key={index}
           open={toast.open}
-          sx={index > 0 ? { marginBottom: index * 6.5 } : {}}
+          sx={index > 0 ? { marginBottom: index * 6.5 } : null}
         >
           <Alert variant="filled" severity={toast.severity}>
             {toast.message}

frontend/src/router.tsx

@@ -2,6 +2,7 @@ import { CircularProgress } from '@mui/material'
 import { Suspense, lazy } from 'react'
 import { createHashRouter } from 'react-router-dom'
 import Layout from './Layout'
+import Terminal from './views/Terminal'
 
 const Home = lazy(() => import('./views/Home'))
 const Login = lazy(() => import('./views/Login'))
@@ -36,6 +37,14 @@ export const router = createHashRouter([
           </Suspense >
         )
       },
+      {
+        path: '/log',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <Terminal />
+          </Suspense >
+        )
+      },
       {
         path: '/archive',
         element: (
@@ -57,6 +66,14 @@ export const router = createHashRouter([
           </Suspense >
         )
       },
+      {
+        path: '/error',
+        element: (
+          <Suspense fallback={<CircularProgress />}>
+            <ErrorBoundary />
+          </Suspense >
+        )
+      },
     ]
   },
 ])

frontend/src/types/index.ts

@@ -16,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
@@ -41,18 +41,18 @@ type DownloadProgress = {
   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
@@ -83,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,4 @@
+import { pipe } from 'fp-ts/lib/function'
 import type { RPCResponse } from "./types"
 
 /**
@@ -10,15 +11,6 @@ export function validateIP(ipAddr: string): boolean {
   return ipRegex.test(ipAddr)
 }
 
-/**
- * Validate a domain via regex.  
- * The validation pass if the domain respects the following formats:  
- * - localhost
- * - domain.tld
- * - dir.domain.tld
- * @param domainName 
- * @returns domain validity test
- */
 export function validateDomain(url: string): boolean {
   const urlRegex = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
   const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
@@ -28,17 +20,6 @@ export function validateDomain(url: string): boolean {
   return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
 }
 
-/**
- * Validate a domain via regex.  
- * Exapmples
- * - http://example.com
- * - https://example.com
- * - http://www.example.com
- * - https://www.example.com
- * - http://10.0.0.1/[something]/[something-else]
- * @param url 
- * @returns url validity test
- */
 export function isValidURL(url: string): boolean {
   let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
   return urlRegex.test(url)
@@ -61,14 +42,21 @@ export function toFormatArgs(codes: string[]): string {
   return ''
 }
 
-export const formatGiB = (bytes: number) =>
+export function formatSize(bytes: number): string {
-  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+  const threshold = 1024
+  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
 
-export const roundMiB = (bytes: number) =>
+  let i = 0
-  `${(bytes / 1_000_000).toFixed(2)} MiB`
+  while (bytes >= threshold) {
+    bytes /= threshold
+    i = i + 1
+  }
+
+  return `${bytes.toFixed(i == 0 ? 0 : 2)} ${units.at(i)}`
+}
 
 export const formatSpeedMiB = (val: number) =>
-  `${roundMiB(val)}/s`
+  `${(val / 1_048_576).toFixed(2)} MiB/s`
 
 export const datetimeCompareFunc = (a: string, b: string) =>
   new Date(a).getTime() - new Date(b).getTime()
@@ -94,3 +82,10 @@ export function mapProcessStatus(status: number) {
 
 export const prefersDarkMode = () =>
   window.matchMedia('(prefers-color-scheme: dark)').matches
+
+export const base64URLEncode = (s: string) => pipe(
+  s,
+  s => String.fromCodePoint(...new TextEncoder().encode(s)),
+  btoa,
+  encodeURIComponent
+)

frontend/src/views/Archive.tsx

@@ -14,6 +14,8 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  MenuList,
   Paper,
   SpeedDial,
   SpeedDialAction,
@@ -26,23 +28,31 @@ 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 DownloadIcon from '@mui/icons-material/Download'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
 import { useEffect, useMemo, useState, useTransition } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { BehaviorSubject, Subject, combineLatestWith, map, share } from 'rxjs'
 import { serverURL } from '../atoms/settings'
 import { useObservable } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
-import { DeleteRequest, DirectoryEntry } from '../types'
+import { DirectoryEntry } from '../types'
-import { roundMiB } from '../utils'
+import { base64URLEncode, formatSize } from '../utils'
 
 export default function Downloaded() {
+  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
+  const [showMenu, setShowMenu] = useState(false)
+  const [currentFile, setCurrentFile] = useState<DirectoryEntry>()
+
   const serverAddr = useRecoilValue(serverURL)
   const navigate = useNavigate()
 
   const { i18n } = useI18n()
+  const { pushMessage } = useToast()
 
   const [openDialog, setOpenDialog] = useState(false)
 
@@ -51,20 +61,24 @@ export default function Downloaded() {
 
   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 +94,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.filter(f => f.name !== '')]
+          : r.filter(f => f.name !== '')
         )
-      })
+      )
+    )()
   }
 
   const selectable$ = useMemo(() => files$.pipe(
@@ -117,19 +139,24 @@ export default function Downloaded() {
       : selected$.next([...selected$.value, name])
   }
 
-  const deleteSelected = () => {
+  const deleteFile = (entry: DirectoryEntry) => pipe(
-    Promise.all(selectable
+    ffetch(`${serverAddr}/archive/delete`, {
-      .filter(entry => entry.selected)
-      .map(entry => fetch(`${serverAddr}/archive/delete`, {
       method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
       body: JSON.stringify({
         path: entry.path,
         shaSum: entry.shaSum,
-        } as DeleteRequest)
+      })
-      }))
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => fetcher()
+    )
+  )()
+
+  const deleteSelected = () => {
+    Promise.all(selectable
+      .filter(entry => entry.selected)
+      .map(deleteFile)
     ).then(fetcher)
   }
 
@@ -138,7 +165,15 @@ export default function Downloaded() {
   }, [serverAddr])
 
   const onFileClick = (path: string) => startTransition(() => {
-    window.open(`${serverAddr}/archive/d/${Buffer.from(path).toString('hex')}`)
+    const encoded = base64URLEncode(path)
+
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  })
+
+  const downloadFile = (path: string) => startTransition(() => {
+    const encoded = base64URLEncode(path)
+
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
   })
 
   const onFolderClick = (path: string) => startTransition(() => {
@@ -146,18 +181,42 @@ export default function Downloaded() {
   })
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container
+      maxWidth="xl"
+      sx={{ mt: 4, mb: 4, height: '100%' }}
+      onClick={() => setShowMenu(false)}
+    >
+      <IconMenu
+        posX={menuPos.x}
+        posY={menuPos.y}
+        hide={!showMenu}
+        onDownload={() => {
+          if (currentFile) {
+            downloadFile(currentFile?.path)
+            setCurrentFile(undefined)
+          }
+        }}
+        onDelete={() => {
+          if (currentFile) {
+            deleteFile(currentFile)
+            setCurrentFile(undefined)
+          }
+        }}
+      />
       <Backdrop
         sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
         open={!(files$.observed) || isPending}
       >
         <CircularProgress color="primary" />
       </Backdrop>
-      <Paper sx={{
+      <Paper
+        sx={{
           p: 2,
           display: 'flex',
           flexDirection: 'column',
-      }}>
+        }}
+        onClick={() => setShowMenu(false)}
+      >
         <Typography py={1} variant="h5" color="primary">
           {i18n.t('archiveTitle')}
         </Typography>
@@ -165,6 +224,12 @@ export default function Downloaded() {
           {selectable.length === 0 && 'No files found'}
           {selectable.map((file, idx) => (
             <ListItem
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setCurrentFile(file)
+                setMenuPos({ x: e.clientX, y: e.clientY })
+                setShowMenu(true)
+              }}
               key={idx}
               secondaryAction={
                 <div>
@@ -172,14 +237,16 @@ export default function Downloaded() {
                     variant="caption"
                     component="span"
                   >
-                    {roundMiB(file.size)}
+                    {formatSize(file.size)}
                   </Typography>
                   }
-                  {!file.isDirectory && <Checkbox
+                  {!file.isDirectory && <>
+                    <Checkbox
                       edge="end"
                       checked={file.selected}
                       onChange={() => addSelected(file.name)}
-                  />}
+                    />
+                  </>}
                 </div>
               }
               disablePadding
@@ -207,8 +274,8 @@ export default function Downloaded() {
         </List>
       </Paper>
       <SpeedDial
-        ariaLabel="SpeedDial basic example"
+        ariaLabel='archive actions'
-        sx={{ position: 'absolute', bottom: 32, right: 32 }}
+        sx={{ position: 'absolute', bottom: 64, right: 24 }}
         icon={<SpeedDialIcon />}
       >
         <SpeedDialAction
@@ -240,11 +307,15 @@ export default function Downloaded() {
           </ul>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
+          <Button onClick={() => setOpenDialog(false)}>
-          <Button onClick={() => {
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
               deleteSelected()
               setOpenDialog(false)
-          }} autoFocus
+            }}
+            autoFocus
           >
             Ok
           </Button>
@@ -253,3 +324,42 @@ export default function Downloaded() {
     </Container>
   )
 }
+
+const IconMenu: React.FC<{
+  posX: number
+  posY: number
+  hide: boolean
+  onDownload: () => void
+  onDelete: () => void
+}> = ({ posX, posY, hide, onDelete, onDownload }) => {
+  return (
+    <Paper sx={{
+      width: 320,
+      maxWidth: '100%',
+      position: 'absolute',
+      top: posY,
+      left: posX,
+      display: hide ? 'none' : 'block',
+      zIndex: (theme) => theme.zIndex.drawer + 1,
+    }}>
+      <MenuList>
+        <MenuItem onClick={onDownload}>
+          <ListItemIcon>
+            <DownloadIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Download
+          </ListItemText>
+        </MenuItem>
+        <MenuItem onClick={onDelete}>
+          <ListItemIcon>
+            <DeleteForeverIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Delete
+          </ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  )
+}

frontend/src/views/Home.tsx

@@ -8,7 +8,7 @@ import Splash from '../components/Splash'
 
 export default function Home() {
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container maxWidth="xl" sx={{ mt: 2, mb: 8 }}>
       <LoadingBackdrop />
       <Splash />
       <Downloads />

frontend/src/views/Login.tsx

@@ -15,6 +15,10 @@ 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',
@@ -42,13 +46,15 @@ export default function Login() {
 
   const navigate = useNavigate()
 
+  const { pushMessage } = useToast()
+
   const navigateAndReload = () => {
     navigate('/')
     window.location.reload()
   }
 
   const login = async () => {
-    const res = await fetch(`${url}/auth/login`, {
+    const task = ffetch<string>(`${url}/auth/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -56,9 +62,23 @@ export default function Login() {
       body: JSON.stringify({
         username,
         password,
+      }),
     })
-    })
+
-    res.ok ? navigateAndReload() : setFormHasError(true)
+    pipe(
+      task,
+      matchW(
+        (error) => {
+          setFormHasError(true)
+          pushMessage(error, 'error')
+        },
+        (token) => {
+          console.log(token)
+          localStorage.setItem('token', token)
+          navigateAndReload()
+        }
+      )
+    )()
   }
 
   return (

frontend/src/views/Settings.tsx

@@ -43,6 +43,7 @@ import {
   serverPortState,
   themeState
 } from '../atoms/settings'
+import CookiesTextField from '../components/CookiesTextField'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
@@ -129,16 +130,16 @@ export default function Settings() {
    * Updates yt-dlp binary via RPC
    */
   const updateBinary = () => {
-    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated')))
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
   }
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
       <Grid container spacing={3}>
         <Grid item xs={12} md={12} lg={12}>
           <Paper
             sx={{
-              p: 2,
+              p: 2.5,
               display: 'flex',
               flexDirection: 'column',
               minHeight: 240,
@@ -203,7 +204,7 @@ export default function Settings() {
                       label={i18n.t('languageSelect')}
                       onChange={handleLanguageChange}
                     >
-                      {languages.map(l => (
+                      {languages.toSorted((a, b) => a.localeCompare(b)).map(l => (
                         <MenuItem value={l} key={l}>
                           {capitalize(l)}
                         </MenuItem>
@@ -298,6 +299,12 @@ 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

frontend/src/views/Terminal.tsx

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

frontend/vite.config.ts

@@ -1,10 +1,12 @@
 import react from '@vitejs/plugin-react-swc'
+import million from 'million/compiler'
 import ViteYaml from '@modyfi/vite-plugin-yaml'
 import { defineConfig } from 'vite'
 
 export default defineConfig(() => {
   return {
     plugins: [
+      million.vite({ auto: true }),
       react(),
       ViteYaml(),
     ],

go.mod

@@ -1,14 +1,38 @@
 module github.com/marcopeocchi/yt-dlp-web-ui
 
-go 1.20
+go 1.22
 
 require (
-	github.com/go-chi/chi/v5 v5.0.10
+	github.com/go-chi/chi/v5 v5.0.12
-	github.com/goccy/go-json v0.10.2
+	github.com/go-chi/cors v1.2.1
-	github.com/golang-jwt/jwt/v5 v5.0.0
+	github.com/golang-jwt/jwt/v5 v5.2.1
-	github.com/google/uuid v1.3.1
+	github.com/google/uuid v1.6.0
-	github.com/gorilla/websocket v1.5.0
+	github.com/gorilla/websocket v1.5.1
-	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
+	github.com/reactivex/rxgo/v2 v2.5.0
-	golang.org/x/sys v0.12.0
+	golang.org/x/sys v0.18.0
 	gopkg.in/yaml.v3 v3.0.1
+	modernc.org/sqlite v1.29.5
+)
+
+require (
+	github.com/cenkalti/backoff/v4 v4.2.1 // indirect
+	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/emirpasic/gods v1.18.1 // indirect
+	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/ncruces/go-strftime v0.1.9 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/stretchr/objx v0.5.2 // indirect
+	github.com/stretchr/testify v1.9.0 // indirect
+	github.com/teivah/onecontext v1.3.0 // indirect
+	golang.org/x/net v0.22.0 // indirect
+	golang.org/x/sync v0.6.0 // indirect
+	modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b // indirect
+	modernc.org/libc v1.47.0 // indirect
+	modernc.org/mathutil v1.6.0 // indirect
+	modernc.org/memory v1.7.2 // indirect
+	modernc.org/strutil v1.2.0 // indirect
+	modernc.org/token v1.1.0 // indirect
 )

go.sum

@@ -1,22 +1,109 @@
-github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
+github.com/cenkalti/backoff/v4 v4.0.0/go.mod h1:eEew/i+1Q6OrCDZh3WiXYv3+nJwBASZ8Bog/87DQnVg=
-github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/cenkalti/backoff/v4 v4.2.1 h1:y4OZtCnogmCPw98Zjyt5a6+QwPLGkiQsYW5oUqylYbM=
-github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
+github.com/cenkalti/backoff/v4 v4.2.1/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
-github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
+github.com/emirpasic/gods v1.12.0/go.mod h1:YfzfFFoVP/catgzJb4IKIqXjX78Ha8FMSDh3ymbK86o=
-github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/emirpasic/gods v1.18.1 h1:FXtiHYKDGKCW2KzwZKx0iC0PQmdlorYgdFG9jPXJ1Bc=
-github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
+github.com/emirpasic/gods v1.18.1/go.mod h1:8tpGGwCnJ5H4r6BWwaV6OrWmMoPhUl5jm/FMNAnJvWQ=
-github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/go-chi/chi/v5 v5.0.12 h1:9euLV5sTrTNTRUU9POmDUvfxyj6LAABLUcEWO+JJb4s=
-github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
+github.com/go-chi/chi/v5 v5.0.12/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
-github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
+github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
-golang.org/x/sys v0.9.0 h1:KS/R3tvhPqvJvwcKfnBHJwwthS11LRhmM5D59eEXa0s=
+github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
-golang.org/x/sys v0.9.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
-golang.org/x/sys v0.12.0 h1:CM0HF96J0hcLAwsHPJZjfdNzs0gftsLfgKt57wWHJ0o=
+github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
+github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26/go.mod h1:dDKJzRmX4S37WGHujM7tX//fmj1uioxKzKxz3lo4HJo=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
+github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
+github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
+github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
+github.com/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
+github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
+github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
+github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
+github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
+github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
+github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
+github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/reactivex/rxgo/v2 v2.5.0 h1:FhPgHwX9vKdNQB2gq9EPt+EKk9QrrzoeztGbEEnZam4=
+github.com/reactivex/rxgo/v2 v2.5.0/go.mod h1:bs4fVZxcb5ZckLIOeIeVH942yunJLWDABWGbrHAW+qU=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.5.2 h1:xuMeJ0Sdp5ZMRXx/aWO6RZxdr3beISkG5/G/aIRr3pY=
+github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
+github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
+github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775/go.mod h1:XUZ4x3oGhWfiOnUvTslnKKs39AWUct3g3yJvXTQSJOQ=
+github.com/teivah/onecontext v1.3.0 h1:tbikMhAlo6VhAuEGCvhc8HlTnpX4xTNPTOseWuhO1J0=
+github.com/teivah/onecontext v1.3.0/go.mod h1:hoW1nmdPVK/0jrvGtcx8sCKYs2PiS4z0zzfdeuEVyb0=
+go.uber.org/goleak v1.1.10 h1:z+mqJhf6ss6BSfSM671tgKyZBFPTTJM+HLxnhPC3wu0=
+go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de h1:5hukYrvBGR8/eNkX5mdUezrA6JiaEZDtJb9Ei+1LlBs=
+golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
+golang.org/x/mod v0.16.0 h1:QX4fJ0Rr5cPQCF7O9lh9Se4pmwfwskqZfq5moyldzic=
+golang.org/x/mod v0.16.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.22.0 h1:9sGLhx7iRIHEiX0oAJ3MRZMUCElJgy7Br1nO+AMN3Tc=
+golang.org/x/net v0.22.0/go.mod h1:JKghWKKOSdJwpW2GEx0Ja7fmaKnMsbu+MWVZTokSYmg=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.6.0 h1:5BMeUDZ7vkXGfEr1x9B4bRcTH4lpkTkpdh0T/J+qjbQ=
+golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
+golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
+golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.19.0 h1:tfGCXNR1OsFG+sVdLAitlpjAvD/I6dHDKnYrpEZUHkw=
+golang.org/x/tools v0.19.0/go.mod h1:qoJWxmGSIBmAeriMx19ogtrEPrGtDbPK634QFIcLAhc=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
+gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+modernc.org/cc/v4 v4.19.5 h1:QlsZyQ1zf78DGeqnQ9ILi9hXyMdoC5e1qoGNUyBjHQw=
+modernc.org/cc/v4 v4.19.5/go.mod h1:HM7VJTZbUCR3rV8EYBi9wxnJ0ZBRiGE5OeGXNA0IsLQ=
+modernc.org/ccgo/v4 v4.13.0 h1:99E8QHRoPrXN8VpS0zgAgJ5nSjpXrPKpsJIMvGL/2Oc=
+modernc.org/ccgo/v4 v4.13.0/go.mod h1:Td6RI9W9G2ZpKHaJ7UeGEiB2aIpoDqLBnm4wtkbJTbQ=
+modernc.org/fileutil v1.3.0 h1:gQ5SIzK3H9kdfai/5x41oQiKValumqNTDXMvKo62HvE=
+modernc.org/fileutil v1.3.0/go.mod h1:XatxS8fZi3pS8/hKG2GH/ArUogfxjpEKs3Ku3aK4JyQ=
+modernc.org/gc/v2 v2.4.1 h1:9cNzOqPyMJBvrUipmynX0ZohMhcxPtMccYgGOJdOiBw=
+modernc.org/gc/v2 v2.4.1/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
+modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b h1:BnN1t+pb1cy61zbvSUV7SeI0PwosMhlAEi/vBY4qxp8=
+modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
+modernc.org/libc v1.47.0 h1:BXrzId9fOOkBtS+uFQ5aZyVGmt7WcSEPrXF5Kwsho90=
+modernc.org/libc v1.47.0/go.mod h1:gzCncw0a74aCiVqHeWAYHHaW//fkSHHS/3S/gfhLlCI=
+modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
+modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
+modernc.org/memory v1.7.2 h1:Klh90S215mmH8c9gO98QxQFsY+W451E8AnzjoE2ee1E=
+modernc.org/memory v1.7.2/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
+modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
+modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
+modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
+modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
+modernc.org/sqlite v1.29.5 h1:8l/SQKAjDtZFo9lkJLdk8g9JEOeYRG4/ghStDCCTiTE=
+modernc.org/sqlite v1.29.5/go.mod h1:S02dvcmm7TnTRvGhv8IGYyLnIt7AS2KPaB1F/71p75U=
+modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
+modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
+modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
+modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=

main.go

@@ -14,11 +14,14 @@ import (
 )
 
 var (
+	host              string
 	port              int
 	queueSize         int
 	configFile        string
 	downloadPath      string
 	downloaderPath    string
+	sessionFilePath   string
+	localDatabasePath string
 
 	requireAuth bool
 	username    string
@@ -27,6 +30,9 @@ var (
 	userFromEnv = os.Getenv("USERNAME")
 	passFromEnv = os.Getenv("PASSWORD")
 
+	logFile           string
+	enableFileLogging bool
+
 	//go:embed frontend/dist/index.html
 	//go:embed frontend/dist/assets/*
 	frontend embed.FS
@@ -34,12 +40,18 @@ var (
 
 func init() {
 
+	flag.StringVar(&host, "host", "0.0.0.0", "Host where server will listen at")
 	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
 	flag.IntVar(&queueSize, "qs", runtime.NumCPU(), "Download queue size")
 
 	flag.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(&enableFileLogging, "fl", false, "enable outputting logs to a file")
+	flag.StringVar(&logFile, "lf", "yt-dlp-webui.log", "set log file location")
 
 	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
 	flag.StringVar(&username, "user", userFromEnv, "Username required for auth")
@@ -57,19 +69,28 @@ func main() {
 
 	c := config.Instance()
 
-	c.SetPort(port)
+	c.Host = host
-	c.QueueSize(queueSize)
+	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.Username(username)
+	c.Username = username
-	c.Password(password)
+	c.Password = password
 
 	// if config file is found it will be merged with the current config struct
-	if _, err := c.LoadFromFile(configFile); err != nil {
+	if err := c.LoadFile(configFile); err != nil {
-		log.Println(cli.BgRed, "config", cli.Reset, "no config file found")
+		log.Println(cli.BgRed, "config", cli.Reset, err)
 	}
 
-	server.RunBlocking(port, frontend)
+	server.RunBlocking(&server.RunConfig{
+		Host:        c.Host,
+		Port:        c.Port,
+		App:         frontend,
+		DBPath:      localDatabasePath,
+		FileLogging: enableFileLogging,
+		LogFile:     logFile,
+	})
 }

server/config/parser.go

@@ -7,9 +7,10 @@ import (
 	"gopkg.in/yaml.v3"
 )
 
-var lock sync.Mutex
+type Config struct {
-
+	CurrentLogFile  string
-type serverConfig struct {
+	LogPath         string `yaml:"log_path"`
+	Host            string `yaml:"host"`
 	Port            int    `yaml:"port"`
 	DownloadPath    string `yaml:"downloadPath"`
 	DownloaderPath  string `yaml:"downloaderPath"`
@@ -17,66 +18,33 @@ type serverConfig struct {
 	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 {
-	fd, err := os.Open(filename)
-	if err != nil {
-		return serverConfig{}, err
-	}
-
-	if err := yaml.NewDecoder(fd).Decode(&c.cfg); err != nil {
-		return serverConfig{}, err
-	}
-
-	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) Username(username string) {
-	c.cfg.Username = username
-}
-
-func (c *config) Password(password string) {
-	c.cfg.Password = password
-}
-
-func (c *config) QueueSize(size int) {
-	c.cfg.QueueSize = size
-}
-
-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
 }
+
+// Initialises the Config struct given its config file
+func (c *Config) LoadFile(filename string) error {
+	fd, err := os.Open(filename)
+	if err != nil {
+		return err
+	}
+
+	if err := yaml.NewDecoder(fd).Decode(c); err != nil {
+		return err
+	}
+
+	return nil
+}

server/dbutils/migrate.go

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

server/handlers/archive.go

@@ -1,8 +1,11 @@
 package handlers
 
 import (
-	"encoding/hex"
+	"encoding/base64"
+	"encoding/json"
+	"io"
 	"net/http"
+	"net/url"
 	"os"
 	"path/filepath"
 	"sort"
@@ -10,29 +13,32 @@ import (
 	"time"
 
 	"github.com/go-chi/chi/v5"
-	"github.com/goccy/go-json"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
+/*
+	File based operation handlers (should be moved to rest/handlers.go) or in
+	a entirely self-contained package
+*/
+
 type DirectoryEntry struct {
 	Name        string    `json:"name"`
 	Path        string    `json:"path"`
 	Size        int64     `json:"size"`
-	SHASum      string    `json:"shaSum"`
 	ModTime     time.Time `json:"modTime"`
 	IsVideo     bool      `json:"isVideo"`
 	IsDirectory bool      `json:"isDirectory"`
 }
 
 func walkDir(root string) (*[]DirectoryEntry, error) {
-	files := []DirectoryEntry{}
-
 	dirs, err := os.ReadDir(root)
 	if err != nil {
 		return nil, err
 	}
 
+	var files []DirectoryEntry
+
 	for _, d := range dirs {
 		if !utils.IsValidEntry(d) {
 			continue
@@ -49,7 +55,6 @@ func walkDir(root string) (*[]DirectoryEntry, error) {
 			Path:        path,
 			Name:        d.Name(),
 			Size:        info.Size(),
-			SHASum:      utils.ShaSumString(path),
 			IsVideo:     utils.IsVideo(d),
 			IsDirectory: d.IsDir(),
 			ModTime:     info.ModTime(),
@@ -65,11 +70,10 @@ type ListRequest struct {
 }
 
 func ListDownloaded(w http.ResponseWriter, r *http.Request) {
-	root := config.Instance().GetConfig().DownloadPath
+	root := config.Instance().DownloadPath
 	req := new(ListRequest)
 
-	err := json.NewDecoder(r.Body).Decode(&req)
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
@@ -87,9 +91,8 @@ func ListDownloaded(w http.ResponseWriter, r *http.Request) {
 	}
 
 	w.WriteHeader(http.StatusOK)
-	err = json.NewEncoder(w).Encode(files)
 
-	if err != nil {
+	if err := json.NewEncoder(w).Encode(files); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 	}
 }
@@ -99,21 +102,13 @@ type DeleteRequest = DirectoryEntry
 func DeleteFile(w http.ResponseWriter, r *http.Request) {
 	req := new(DeleteRequest)
 
-	err := json.NewDecoder(r.Body).Decode(&req)
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
-	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
-	sum := utils.ShaSumString(req.Path)
+	if err := os.Remove(req.Path); err != nil {
-	if sum != req.SHASum {
+		http.Error(w, err.Error(), http.StatusBadRequest)
-		http.Error(w, "shasum mismatch", http.StatusBadRequest)
-		return
-	}
-
-	err = os.Remove(req.Path)
-	if err != nil {
-		http.Error(w, "shasum mismatch", http.StatusBadRequest)
 		return
 	}
 
@@ -129,24 +124,72 @@ func SendFile(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	decoded, err := hex.DecodeString(path)
+	path, err := url.QueryUnescape(path)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
-	decodedStr := string(decoded)
+	decoded, err := base64.StdEncoding.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
 
-	root := config.Instance().GetConfig().DownloadPath
+	filename := string(decoded)
+
+	root := config.Instance().DownloadPath
 
 	// TODO: further path / file validations
-	if strings.Contains(filepath.Dir(decodedStr), root) {
+	if strings.Contains(filepath.Dir(filename), root) {
-		// ctx.Response().Header.Set(
+		http.ServeFile(w, r, filename)
-		// 	"Content-Disposition",
+		return
-		// 	"inline; filename="+filepath.Base(decodedStr),
+	}
-		// )
+
-
+	w.WriteHeader(http.StatusUnauthorized)
-		http.ServeFile(w, r, decodedStr)
+}
+
+func DownloadFile(w http.ResponseWriter, r *http.Request) {
+	path := chi.URLParam(r, "id")
+
+	if path == "" {
+		http.Error(w, "inexistent path", http.StatusBadRequest)
+		return
+	}
+
+	path, err := url.QueryUnescape(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decoded, err := base64.StdEncoding.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	filename := string(decoded)
+
+	root := config.Instance().DownloadPath
+
+	if strings.Contains(filepath.Dir(filename), root) {
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(filename),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
+
+		fd, err := os.Open(filename)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
 	}
 
 	w.WriteHeader(http.StatusUnauthorized)

server/handlers/login.go

@@ -1,11 +1,11 @@
 package handlers
 
 import (
+	"encoding/json"
 	"net/http"
 	"os"
 	"time"
 
-	"github.com/goccy/go-json"
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
@@ -24,10 +24,13 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	cfg := config.Instance().GetConfig()
+	var (
+		username = config.Instance().Username
+		password = config.Instance().Password
+	)
 
-	if cfg.Username != req.Username || cfg.Password != req.Password {
+	if username != req.Username || password != req.Password {
-		http.Error(w, err.Error(), http.StatusBadRequest)
+		http.Error(w, "invalid username or password", http.StatusBadRequest)
 		return
 	}
 
@@ -44,16 +47,10 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	cookie := &http.Cookie{
+	if err := json.NewEncoder(w).Encode(tokenString); err != nil {
-		Name:     utils.TOKEN_COOKIE_NAME,
+		http.Error(w, err.Error(), http.StatusInternalServerError)
-		HttpOnly: true,
+		return
-		Secure:   false,
-		Expires:  expiresAt, // 30 days
-		Value:    tokenString,
-		Path:     "/",
 	}
-
-	http.SetCookie(w, cookie)
 }
 
 func Logout(w http.ResponseWriter, r *http.Request) {

server/internal/common.go

@@ -7,7 +7,7 @@ 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
@@ -50,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
@@ -71,3 +73,14 @@ type DownloadRequest struct {
 	Rename string   `json:"rename"`
 	Params []string `json:"params"`
 }
+
+// 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

@@ -4,12 +4,13 @@ import (
 	"encoding/gob"
 	"errors"
 	"fmt"
-	"log"
+	"log/slog"
 	"os"
+	"path/filepath"
 	"sync"
 
 	"github.com/google/uuid"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
 // In-Memory Thread-Safe Key-Value Storage with optional persistence
@@ -28,7 +29,7 @@ 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()
 	m.table.Store(id, process)
 	process.Id = id
 	return id
@@ -83,6 +84,8 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 			Id:       key.(string),
 			Info:     value.(*Process).Info,
 			Progress: value.(*Process).Progress,
+			Output:   value.(*Process).Output,
+			Params:   value.(*Process).Params,
 		})
 		return true
 	})
@@ -90,12 +93,14 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 }
 
 // WIP: Persist the database in a single file named "session.dat"
-func (m *MemoryDB) Persist() {
+func (m *MemoryDB) Persist() error {
 	running := m.All()
 
-	fd, err := os.Create("session.dat")
+	sf := filepath.Join(config.Instance().SessionFilePath, "session.dat")
+
+	fd, err := os.Create(sf)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
 	session := Session{
@@ -104,14 +109,14 @@ func (m *MemoryDB) Persist() {
 
 	err = gob.NewEncoder(fd).Encode(session)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
-	log.Println(cli.BgBlue, "Successfully serialized session", cli.Reset)
+	return nil
 }
 
 // WIP: Restore a persisted state
-func (m *MemoryDB) Restore() {
+func (m *MemoryDB) Restore(logger *slog.Logger) {
 	fd, err := os.Open("session.dat")
 	if err != nil {
 		return
@@ -130,6 +135,9 @@ func (m *MemoryDB) Restore() {
 			Url:      proc.Info.URL,
 			Info:     proc.Info,
 			Progress: proc.Progress,
+			Output:   proc.Output,
+			Params:   proc.Params,
+			Logger:   logger,
 		}
 
 		m.table.Store(proc.Id, restored)
@@ -138,6 +146,4 @@ func (m *MemoryDB) Restore() {
 			go restored.Start()
 		}
 	}
-
-	log.Println(cli.BgGreen, "Successfully restored session", cli.Reset)
 }

server/internal/message_queue.go

@@ -1,8 +1,6 @@
 package internal
 
 import (
-	"log"
-
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
@@ -16,10 +14,10 @@ type MessageQueue struct {
 // CPU cores.
 // The queue size can be set via the qs flag.
 func NewMessageQueue() *MessageQueue {
-	size := config.Instance().GetConfig().QueueSize
+	size := config.Instance().QueueSize
 
 	if size <= 0 {
-		log.Fatalln("invalid queue size")
+		panic("invalid queue size")
 	}
 
 	return &MessageQueue{

server/internal/playlist.go

@@ -1,23 +1,28 @@
 package internal
 
 import (
+	"encoding/json"
 	"errors"
-	"log"
+	"log/slog"
 	"os/exec"
+	"strings"
 	"time"
 
-	"github.com/goccy/go-json"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 )
 
 type metadata struct {
 	Entries       []DownloadInfo `json:"entries"`
 	Count         int            `json:"playlist_count"`
+	PlaylistTitle string         `json:"title"`
 	Type          string         `json:"_type"`
 }
 
-func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
+func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB, logger *slog.Logger) error {
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, req.URL, "-J")
+	var (
+		downloader = config.Instance().DownloaderPath
+		cmd        = exec.Command(downloader, req.URL, "-J")
+	)
 
 	stdout, err := cmd.StdoutPipe()
 	if err != nil {
@@ -31,14 +36,14 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 		return err
 	}
 
-	log.Println(cli.BgRed, "Decoding metadata", cli.Reset, req.URL)
+	logger.Info("decoding metadata", slog.String("url", req.URL))
 
 	err = json.NewDecoder(stdout).Decode(&m)
 	if err != nil {
 		return err
 	}
 
-	log.Println(cli.BgGreen, "Decoded metadata", cli.Reset, req.URL)
+	logger.Info("decoded metadata", slog.String("url", req.URL))
 
 	if m.Type == "" {
 		cmd.Wait()
@@ -46,21 +51,36 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 	}
 
 	if m.Type == "playlist" {
-		log.Println(
+		logger.Info(
-			cli.BgGreen, "Playlist detected", cli.Reset, m.Count, "entries",
+			"playlist detected",
+			slog.String("url", req.URL),
+			slog.Int("count", m.Count),
+		)
+
+		for i, meta := range m.Entries {
+			delta := time.Second.Microseconds() * int64(i+1)
+
+			// detect playlist title from metadata since each playlist entry will be
+			// treated as an individual download
+			req.Rename = strings.Replace(
+				req.Rename,
+				"%(playlist_title)s",
+				m.PlaylistTitle,
+				1,
 			)
 
-		for _, meta := range m.Entries {
 			proc := &Process{
 				Url:      meta.OriginalURL,
 				Progress: DownloadProgress{},
-				Output:   DownloadOutput{},
+				Output: DownloadOutput{
+					Filename: req.Rename,
+				},
 				Info:   meta,
 				Params: req.Params,
 			}
 
 			proc.Info.URL = meta.OriginalURL
-			proc.Info.CreatedAt = time.Now().Add(time.Second)
+			proc.Info.CreatedAt = time.Now().Add(time.Duration(delta))
 
 			db.Set(proc)
 			proc.SetPending()
@@ -71,11 +91,14 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 		return err
 	}
 
-	proc := &Process{Url: req.URL, Params: req.Params}
+	proc := &Process{
+		Url:    req.URL,
+		Params: req.Params,
+		Logger: logger,
+	}
 
 	mq.Publish(proc)
-	log.Println("Sending new process to message queue", proc.Url)
+	logger.Info("sending new process to message queue", slog.String("url", proc.Url))
 
-	err = cmd.Wait()
+	return cmd.Wait()
-	return err
 }

server/internal/process.go

@@ -2,22 +2,23 @@ package internal
 
 import (
 	"bufio"
+	"encoding/json"
 	"fmt"
+	"log/slog"
 	"regexp"
+	"slices"
 	"sync"
 	"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/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/rx"
 )
 
 const template = `download:
@@ -27,10 +28,6 @@ const template = `download:
 	"speed":%(progress.speed)s
 }`
 
-var (
-	cfg = config.Instance()
-)
-
 const (
 	StatusPending = iota
 	StatusDownloading
@@ -42,7 +39,7 @@ type ProgressTemplate struct {
 	Percentage string  `json:"percentage"`
 	Speed      float32 `json:"speed"`
 	Size       string  `json:"size"`
-	Eta        int     `json:"eta"`
+	Eta        float32 `json:"eta"`
 }
 
 // Process descriptor
@@ -54,6 +51,7 @@ type Process struct {
 	Progress DownloadProgress
 	Output   DownloadOutput
 	proc     *os.Process
+	Logger   *slog.Logger
 }
 
 type DownloadOutput struct {
@@ -69,55 +67,77 @@ type DownloadOutput struct {
 func (p *Process) Start() {
 	// escape bash variable escaping and command piping, you'll never know
 	// what they might come with...
-	p.Params = slices.Filter(p.Params, func(e string) bool {
+	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
 		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
-		return !match
+		return match
+	})
+
+	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
+		return e == ""
 	})
 
 	out := DownloadOutput{
-		Path:     cfg.GetConfig().DownloadPath,
+		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"
+		out.Filename = p.Output.Filename
 	}
 
-	params := append([]string{
+	buildFilename(&p.Output)
+
+	params := []string{
 		strings.Split(p.Url, "?list")[0], //no playlist
 		"--newline",
 		"--no-colors",
 		"--no-playlist",
-		"--progress-template", strings.ReplaceAll(template, "\n", ""),
+		"--progress-template",
-		"-o",
+		strings.NewReplacer("\n", "", "\t", "", " ", "").Replace(template),
-		fmt.Sprintf("%s/%s", out.Path, out.Filename),
+	}
-	}, p.Params...)
+
+	// if user asked to manually override the output path...
+	if !(slices.Contains(params, "-P") || slices.Contains(params, "--paths")) {
+		params = append(params, "-o")
+		params = append(params, fmt.Sprintf("%s/%s", out.Path, out.Filename))
+	}
+
+	params = append(params, p.Params...)
 
 	// ----------------- main block ----------------- //
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, params...)
+	cmd := exec.Command(config.Instance().DownloaderPath, params...)
 	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
 
 	r, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Panicln(err)
+		p.Logger.Error(
+			"failed to connect to stdout",
+			slog.String("err", err.Error()),
+		)
+		panic(err)
 	}
 	scan := bufio.NewScanner(r)
 
 	err = cmd.Start()
 	if err != nil {
-		log.Panicln(err)
+		p.Logger.Error(
+			"failed to start yt-dlp process",
+			slog.String("err", err.Error()),
+		)
+		panic(err)
 	}
 
 	p.proc = cmd.Process
 
-	// ----------------- info block ----------------- //
-	// spawn a goroutine that retrieves the info for the download
-
 	// --------------- progress block --------------- //
-	// unbuffered channel connected to stdout
+	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)
@@ -125,11 +145,21 @@ func (p *Process) Start() {
 		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(scan.Bytes(), &stdout)
+			err := json.Unmarshal(event, &stdout)
 			if err == nil {
 				p.Progress = DownloadProgress{
 					Status:     StatusDownloading,
@@ -137,13 +167,13 @@ func (p *Process) Start() {
 					Speed:      stdout.Speed,
 					ETA:        stdout.Eta,
 				}
-				log.Println(
+				p.Logger.Info("progress",
-					cli.BgGreen, "DL", cli.Reset,
+					slog.String("id", p.getShortId()),
-					cli.BgBlue, p.getShortId(), cli.Reset,
+					slog.String("url", p.Url),
-					p.Url, stdout.Percentage,
+					slog.String("percentege", stdout.Percentage),
 				)
 			}
-		}
+		})
 	}()
 
 	// ------------- end progress block ------------- //
@@ -161,12 +191,9 @@ func (p *Process) Complete() {
 		ETA:        0,
 	}
 
-	shortId := p.getShortId()
+	p.Logger.Info("finished",
-
+		slog.String("id", p.getShortId()),
-	log.Println(
+		slog.String("url", p.Url),
-		cli.BgMagenta, "FINISH", cli.Reset,
-		cli.BgBlue, shortId, cli.Reset,
-		p.Url,
 	)
 }
 
@@ -183,7 +210,7 @@ func (p *Process) Kill() error {
 		}
 		err = syscall.Kill(-pgid, syscall.SIGTERM)
 
-		log.Println("Killed process", p.Id)
+		p.Logger.Info("killed process", slog.String("id", p.Id))
 		return err
 	}
 
@@ -192,7 +219,7 @@ func (p *Process) Kill() error {
 
 // Returns the available format for this URL
 func (p *Process) GetFormatsSync() (DownloadFormats, error) {
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.Url, "-J")
+	cmd := exec.Command(config.Instance().DownloaderPath, p.Url, "-J")
 	stdout, err := cmd.Output()
 
 	if err != nil {
@@ -209,16 +236,18 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 
 	wg.Add(2)
 
-	if err != nil {
-		return DownloadFormats{}, err
-	}
-
 	log.Println(
 		cli.BgRed, "Metadata", cli.Reset,
 		cli.BgBlue, "Formats", cli.Reset,
 		p.Url,
 	)
 
+	p.Logger.Info(
+		"retrieving metadata",
+		slog.String("caller", "getFormats"),
+		slog.String("url", p.Url),
+	)
+
 	go func() {
 		decodingError = json.Unmarshal(stdout, &info)
 		wg.Done()
@@ -241,16 +270,26 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 }
 
 func (p *Process) SetPending() {
+	// Since video's title isn't available yet, fill in with the URL.
+	p.Info = DownloadInfo{
+		URL:       p.Url,
+		Title:     p.Url,
+		CreatedAt: time.Now(),
+	}
 	p.Progress.Status = StatusPending
 }
 
 func (p *Process) SetMetadata() error {
-	cmd := exec.Command(cfg.GetConfig().DownloaderPath, p.Url, "-J")
+	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)
+		p.Logger.Error("failed retrieving info",
+			slog.String("id", p.getShortId()),
+			slog.String("url", p.Url),
+			slog.String("err", err.Error()),
+		)
 		return err
 	}
 
@@ -264,10 +303,9 @@ func (p *Process) SetMetadata() error {
 		return err
 	}
 
-	log.Println(
+	p.Logger.Info("retrieving metadata",
-		cli.BgRed, "Metadata", cli.Reset,
+		slog.String("id", p.getShortId()),
-		cli.BgBlue, p.getShortId(), cli.Reset,
+		slog.String("url", p.Url),
-		p.Url,
 	)
 
 	err = json.NewDecoder(stdout).Decode(&info)
@@ -286,3 +324,16 @@ func (p *Process) SetMetadata() error {
 func (p *Process) getShortId() string {
 	return strings.Split(p.Id, "-")[0]
 }
+
+func buildFilename(o *DownloadOutput) {
+	if o.Filename != "" && strings.Contains(o.Filename, ".%(ext)s") {
+		o.Filename += ".%(ext)s"
+	}
+
+	o.Filename = strings.Replace(
+		o.Filename,
+		".%(ext)s.%(ext)s",
+		".%(ext)s",
+		1,
+	)
+}

server/logging/file_logger.go

@@ -0,0 +1,80 @@
+package logging
+
+import (
+	"compress/gzip"
+	"io"
+	"os"
+	"sync"
+	"time"
+)
+
+// implements io.Writer interface
+type LogRotateWriter struct {
+	mu       sync.Mutex
+	fd       *os.File
+	filename string
+}
+
+func NewRotableLogger(filename string) (*LogRotateWriter, error) {
+	fd, err := os.Create(filename)
+	if err != nil {
+		return nil, err
+	}
+	w := &LogRotateWriter{filename: filename, fd: fd}
+	return w, nil
+}
+
+func (w *LogRotateWriter) Write(b []byte) (int, error) {
+	w.mu.Lock()
+	defer w.mu.Unlock()
+	return w.fd.Write(b)
+}
+
+func (w *LogRotateWriter) Rotate() error {
+	var err error
+	w.mu.Lock()
+
+	gzFile, err := os.Create(w.filename + "." + time.Now().Format(time.RFC3339) + ".gz")
+	if err != nil {
+		return err
+	}
+
+	data, err := io.ReadAll(w.fd)
+	if err != nil {
+		return err
+	}
+
+	defer func() {
+		w.mu.Unlock()
+		w.gzipLog(gzFile, &data)
+	}()
+
+	_, err = os.Stat(w.filename)
+	if err != nil {
+		return err
+	}
+
+	if w.fd != nil {
+		err = w.fd.Close()
+		w.fd = nil
+		if err != nil {
+			return err
+		}
+	}
+
+	err = os.Remove(w.filename)
+	if err != nil {
+		return err
+	}
+
+	w.fd, err = os.Create(w.filename)
+	return err
+}
+
+func (w *LogRotateWriter) gzipLog(wr io.Writer, data *[]byte) error {
+	if _, err := gzip.NewWriter(wr).Write(*data); err != nil {
+		return err
+	}
+
+	return nil
+}

server/logging/handler.go

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

server/logging/observable_logger.go

@@ -0,0 +1,31 @@
+package logging
+
+import (
+	"time"
+
+	"github.com/reactivex/rxgo/v2"
+)
+
+var (
+	logsChan       = make(chan rxgo.Item, 100)
+	logsObservable = rxgo.
+			FromChannel(logsChan, rxgo.WithBackPressureStrategy(rxgo.Drop)).
+			BufferWithTime(rxgo.WithDuration(time.Millisecond * 500))
+)
+
+type ObservableLogger struct{}
+
+func NewObservableLogger() *ObservableLogger {
+	return &ObservableLogger{}
+}
+
+func (o *ObservableLogger) Write(p []byte) (n int, err error) {
+	go func() {
+		logsChan <- rxgo.Of(string(p))
+	}()
+
+	n = len(p)
+	err = nil
+
+	return
+}

server/middleware/jwt.go

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

server/middleware/spa_handler.go

@@ -1,93 +0,0 @@
-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/rest/container.go

@@ -1,25 +1,35 @@
 package rest
 
 import (
+	"database/sql"
+
 	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 )
 
-func Container(db *internal.MemoryDB, mq *internal.MessageQueue) *Handler {
+func Container(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) *Handler {
 	var (
-		service = ProvideService(db, mq)
+		service = ProvideService(db, mdb, mq)
 		handler = ProvideHandler(service)
 	)
 	return handler
 }
 
-func ApplyRouter(db *internal.MemoryDB, mq *internal.MessageQueue) func(chi.Router) {
+func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) func(chi.Router) {
-	h := Container(db, mq)
+	h := Container(db, mdb, mq)
 
 	return func(r chi.Router) {
+		if config.Instance().RequireAuth {
 			r.Use(middlewares.Authenticated)
+		}
 		r.Post("/exec", h.Exec())
 		r.Get("/running", h.Running())
+		r.Get("/version", h.GetVersion())
+		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,9 +1,10 @@
 package rest
 
 import (
+	"encoding/json"
 	"net/http"
 
-	"github.com/goccy/go-json"
+	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 )
 
@@ -11,6 +12,10 @@ type Handler struct {
 	service *Service
 }
 
+/*
+	REST version of the JSON-RPC interface
+*/
+
 func (h *Handler) Exec() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		defer r.Body.Close()
@@ -54,3 +59,120 @@ func (h *Handler) Running() http.HandlerFunc {
 		}
 	}
 }
+
+func (h *Handler) SetCookies() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		req := new(internal.SetCookiesRequest)
+
+		err := json.NewDecoder(r.Body).Decode(req)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+
+		err = h.service.SetCookies(r.Context(), req.Cookies)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode("ok")
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) AddTemplate() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		req := new(internal.CustomTemplate)
+
+		err := json.NewDecoder(r.Body).Decode(req)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
+			return
+		}
+
+		if req.Name == "" || req.Content == "" {
+			http.Error(w, "Invalid template", http.StatusBadRequest)
+			return
+		}
+
+		err = h.service.SaveTemplate(r.Context(), req)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode("ok")
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) GetTemplates() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		templates, err := h.service.GetTemplates(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode(templates)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) DeleteTemplate() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		id := chi.URLParam(r, "id")
+
+		err := h.service.DeleteTemplate(r.Context(), id)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		err = json.NewEncoder(w).Encode("ok")
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}
+
+func (h *Handler) GetVersion() http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		defer r.Body.Close()
+
+		w.Header().Set("Content-Type", "application/json")
+
+		version, err := h.service.GetVersion(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		if err := json.NewEncoder(w).Encode(version); err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+		}
+	}
+}

server/rest/provider.go

@@ -1,6 +1,7 @@
 package rest
 
 import (
+	"database/sql"
 	"sync"
 
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -14,9 +15,10 @@ var (
 	handlerOnce sync.Once
 )
 
-func ProvideService(db *internal.MemoryDB, mq *internal.MessageQueue) *Service {
+func ProvideService(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) *Service {
 	serviceOnce.Do(func() {
 		service = &Service{
+			mdb: mdb,
 			db:  db,
 			mq:  mq,
 		}

server/rest/service.go

@@ -2,14 +2,23 @@ package rest
 
 import (
 	"context"
+	"database/sql"
 	"errors"
+	"log/slog"
+	"os"
+	"os/exec"
+	"time"
 
+	"github.com/google/uuid"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 )
 
 type Service struct {
-	db *internal.MemoryDB
+	mdb    *internal.MemoryDB
+	db     *sql.DB
 	mq     *internal.MessageQueue
+	logger *slog.Logger
 }
 
 func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
@@ -20,9 +29,10 @@ func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
 			Path:     req.Path,
 			Filename: req.Rename,
 		},
+		Logger: s.logger,
 	}
 
-	id := s.db.Set(p)
+	id := s.mdb.Set(p)
 	s.mq.Publish(p)
 
 	return id, nil
@@ -33,6 +43,101 @@ func (s *Service) Running(ctx context.Context) (*[]internal.ProcessResponse, err
 	case <-ctx.Done():
 		return nil, errors.New("context cancelled")
 	default:
-		return s.db.All(), nil
+		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
+	}
+
+	defer rows.Close()
+
+	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
+}
+
+func (s *Service) GetVersion(ctx context.Context) (string, error) {
+	ch := make(chan string, 1)
+
+	c, cancel := context.WithTimeout(ctx, time.Second*10)
+	defer cancel()
+
+	cmd := exec.CommandContext(c, config.Instance().DownloaderPath, "--version")
+	go func() {
+		stdout, _ := cmd.Output()
+		ch <- string(stdout)
+	}()
+
+	select {
+	case <-c.Done():
+		return "", errors.New("requesting yt-dlp version took too long")
+	case res := <-ch:
+		return res, nil
 	}
 }

server/rpc/container.go

@@ -1,23 +1,33 @@
 package rpc
 
 import (
+	"log/slog"
+
 	"github.com/go-chi/chi/v5"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"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 {
+func Container(
+	db *internal.MemoryDB,
+	mq *internal.MessageQueue,
+	logger *slog.Logger,
+) *Service {
 	return &Service{
 		db:     db,
 		mq:     mq,
+		logger: logger,
 	}
 }
 
 // RPC service must be registered before applying this router!
 func ApplyRouter() func(chi.Router) {
 	return func(r chi.Router) {
+		if config.Instance().RequireAuth {
 			r.Use(middlewares.Authenticated)
+		}
 		r.Get("/ws", WebSocket)
 		r.Post("/http", Post)
 	}

server/rpc/handlers.go

@@ -2,6 +2,7 @@ package rpc
 
 import (
 	"io"
+	"log"
 	"net/http"
 
 	"github.com/gorilla/websocket"
@@ -13,6 +14,7 @@ var upgrader = websocket.Upgrader{
 	},
 }
 
+// WebSockets JSON-RPC handler
 func WebSocket(w http.ResponseWriter, r *http.Request) {
 	c, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
@@ -29,6 +31,7 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 		mtype, reader, err := c.NextReader()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			log.Println(err)
 			break
 		}
 
@@ -37,6 +40,7 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 		writer, err := c.NextWriter(mtype)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			log.Println(err)
 			break
 		}
 
@@ -44,6 +48,7 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
+// HTTP-POST JSON-RPC handler
 func Post(w http.ResponseWriter, r *http.Request) {
 	defer r.Body.Close()
 

server/rpc/service.go

@@ -1,7 +1,7 @@
 package rpc
 
 import (
-	"log"
+	"log/slog"
 
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
@@ -11,6 +11,7 @@ import (
 type Service struct {
 	db     *internal.MemoryDB
 	mq     *internal.MessageQueue
+	logger *slog.Logger
 }
 
 type Running []internal.ProcessResponse
@@ -34,6 +35,7 @@ func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
 			Path:     args.Path,
 			Filename: args.Rename,
 		},
+		Logger: s.logger,
 	}
 
 	s.db.Set(p)
@@ -46,7 +48,7 @@ func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
 // 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)
+	err := internal.PlaylistDetect(args, s.mq, s.db, s.logger)
 	if err != nil {
 		return err
 	}
@@ -69,7 +71,7 @@ func (s *Service) Progess(args Args, progress *internal.DownloadProgress) error
 // 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}
+	p := internal.Process{Url: args.URL, Logger: s.logger}
 	*meta, err = p.GetFormatsSync()
 	return err
 }
@@ -88,7 +90,7 @@ func (s *Service) Running(args NoArgs, running *Running) error {
 
 // 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)
+	s.logger.Info("Trying killing process with id", slog.String("id", args))
 	proc, err := s.db.Get(args)
 
 	if err != nil {
@@ -106,7 +108,7 @@ func (s *Service) Kill(args string, killed *string) error {
 // 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)
+	s.logger.Info("Killing all spawned processes")
 	keys := s.db.Keys()
 	var err error
 	for _, key := range *keys {
@@ -125,7 +127,7 @@ func (s *Service) KillAll(args NoArgs, killed *string) error {
 
 // 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.logger.Info("Clearing process with id", slog.String("id", args))
 	s.db.Delete(args)
 	return nil
 }
@@ -148,7 +150,7 @@ func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
 
 // 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")
+	s.logger.Info("Updating yt-dlp executable to the latest release")
 	err := updater.UpdateExecutable()
 	if err != nil {
 		*updated = true

server/rpc/wrapper.go

@@ -6,13 +6,16 @@ import (
 	"net/rpc/jsonrpc"
 )
 
-// Wrapper for HTTP RPC request that implements io.Reader interface
+// Wrapper for jsonrpc.ServeConn that simplifies its usage
 type rpcRequest struct {
 	r    io.Reader
 	rw   io.ReadWriter
 	done chan bool
 }
 
+// Takes a reader that can be an *http.Request or anthing that implements
+// io.ReadWriter interface.
+// Call() will perform the jsonRPC call and write or read from the ReadWriter
 func newRequest(r io.Reader) *rpcRequest {
 	var buf bytes.Buffer
 	done := make(chan bool)

server/rx/extensions.go

@@ -2,47 +2,30 @@ 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)) {
+//
-	timer := time.NewTimer(span)
+// Soon it will be deprecated since it doesn't add anything useful.
+// (It lowers the CPU usage by a negligible margin)
+func Sample(span time.Duration, source chan []byte, done chan struct{}, fn func(e []byte)) {
+	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,71 +2,167 @@ package server
 
 import (
 	"context"
+	"database/sql"
 	"fmt"
+	"io"
 	"io/fs"
-	"log"
+	"log/slog"
+	"net"
 	"net/http"
 	"net/rpc"
 	"os"
 	"os/signal"
+	"strings"
 	"syscall"
 	"time"
 
 	"github.com/go-chi/chi/v5"
-	"github.com/go-chi/chi/v5/middleware"
+	"github.com/go-chi/cors"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"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"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/logging"
 	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"
 )
 
+type RunConfig struct {
+	Host        string
+	Port        int
+	App         fs.FS
+	DBPath      string
+	LogFile     string
+	FileLogging bool
+}
+
 type serverConfig struct {
 	frontend fs.FS
+	logger   *slog.Logger
+	host     string
 	port     int
-	db       *internal.MemoryDB
+	mdb      *internal.MemoryDB
+	db       *sql.DB
 	mq       *internal.MessageQueue
 }
 
-func RunBlocking(port int, frontend fs.FS) {
+func RunBlocking(cfg *RunConfig) {
-	var db internal.MemoryDB
+	var mdb internal.MemoryDB
-	db.Restore()
+
+	logWriters := []io.Writer{
+		os.Stdout,
+		logging.NewObservableLogger(),
+	}
+
+	if cfg.FileLogging {
+		logger, err := logging.NewRotableLogger(cfg.LogFile)
+		if err != nil {
+			panic(err)
+		}
+
+		go func() {
+			for {
+				time.Sleep(time.Hour * 24)
+				logger.Rotate()
+			}
+		}()
+
+		logWriters = append(logWriters, logger)
+	}
+
+	logger := slog.New(
+		slog.NewTextHandler(io.MultiWriter(logWriters...), &slog.HandlerOptions{}),
+	)
+
+	mdb.Restore(logger)
+
+	db, err := sql.Open("sqlite", cfg.DBPath)
+	if err != nil {
+		logger.Error("failed to open database", slog.String("err", err.Error()))
+	}
+
+	err = dbutils.AutoMigrate(context.Background(), db)
+	if err != nil {
+		logger.Error("failed to init database", slog.String("err", err.Error()))
+	}
 
 	mq := internal.NewMessageQueue()
 	go mq.Subscriber()
 
 	srv := newServer(serverConfig{
-		frontend: frontend,
+		frontend: cfg.App,
-		port:     port,
+		logger:   logger,
-		db:       &db,
+		host:     cfg.Host,
+		port:     cfg.Port,
+		mdb:      &mdb,
 		mq:       mq,
+		db:       db,
 	})
 
-	go gracefulShutdown(srv, &db)
+	go gracefulShutdown(srv, &mdb)
-	go autoPersist(time.Minute*5, &db)
+	go autoPersist(time.Minute*5, &mdb, logger)
 
-	log.Fatal(srv.ListenAndServe())
+	var (
+		network = "tcp"
+		address = fmt.Sprintf("%s:%d", cfg.Host, cfg.Port)
+	)
+
+	if strings.HasPrefix(cfg.Host, "/") {
+		network = "unix"
+		address = cfg.Host
+	}
+
+	listener, err := net.Listen(network, address)
+	if err != nil {
+		logger.Error("failed to listen", slog.String("err", err.Error()))
+		return
+	}
+
+	logger.Info("yt-dlp-webui started", slog.String("address", address))
+
+	if err := srv.Serve(listener); err != nil {
+		logger.Warn("http server stopped", slog.String("err", err.Error()))
+	}
 }
 
 func newServer(c serverConfig) *http.Server {
-	service := ytdlpRPC.Container(c.db, c.mq)
+	service := ytdlpRPC.Container(c.mdb, c.mq, c.logger)
 	rpc.Register(service)
 
 	r := chi.NewRouter()
 
-	r.Use(middlewares.CORS)
+	corsMiddleware := cors.New(cors.Options{
-	r.Use(middleware.Logger)
+		AllowedOrigins: []string{"*"},
+		AllowedMethods: []string{
+			http.MethodHead,
+			http.MethodGet,
+			http.MethodPost,
+			http.MethodPut,
+			http.MethodPatch,
+			http.MethodDelete,
+		},
+		AllowedHeaders:   []string{"*"},
+		AllowCredentials: true,
+	})
 
-	app := http.FileServer(http.FS(c.frontend))
+	r.Use(corsMiddleware.Handler)
+	// use in dev
+	// r.Use(middleware.Logger)
 
-	r.Mount("/", app)
+	r.Mount("/", http.FileServer(http.FS(c.frontend)))
 
 	// Archive routes
 	r.Route("/archive", func(r chi.Router) {
+		if config.Instance().RequireAuth {
 			r.Use(middlewares.Authenticated)
+		}
 		r.Post("/downloaded", handlers.ListDownloaded)
 		r.Post("/delete", handlers.DeleteFile)
-		r.Get("/d/{id}", handlers.SendFile)
+		r.Get("/d/{id}", handlers.DownloadFile)
+		r.Get("/v/{id}", handlers.SendFile)
 	})
 
 	// Authentication routes
@@ -79,12 +175,12 @@ func newServer(c serverConfig) *http.Server {
 	r.Route("/rpc", ytdlpRPC.ApplyRouter())
 
 	// REST API handlers
-	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mq))
+	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mdb, c.mq))
 
-	return &http.Server{
+	// Logging
-		Addr:    fmt.Sprintf(":%d", c.port),
+	r.Route("/log", logging.ApplyRouter())
-		Handler: r,
+
-	}
+	return &http.Server{Handler: r}
 }
 
 func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
@@ -96,7 +192,7 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 
 	go func() {
 		<-ctx.Done()
-		log.Println("shutdown signal received")
+		slog.Info("shutdown signal received")
 
 		defer func() {
 			db.Persist()
@@ -106,9 +202,15 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 	}()
 }
 
-func autoPersist(d time.Duration, db *internal.MemoryDB) {
+func autoPersist(d time.Duration, db *internal.MemoryDB, logger *slog.Logger) {
 	for {
-		db.Persist()
+		if err := db.Persist(); err != nil {
+			logger.Info(
+				"failed to persisted session",
+				slog.String("err", err.Error()),
+			)
+		}
+		logger.Info("sucessfully persisted session")
 		time.Sleep(d)
 	}
 }

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,7 +26,7 @@ func DirectoryTree() (*[]string, error) {
 		children []Node
 	}
 
-	rootPath := config.Instance().GetConfig().DownloadPath
+	rootPath := config.Instance().DownloadPath
 
 	stack := internal.NewStack[Node]()
 	flattened := make([]string, 0)

server/updater/update.go

@@ -8,7 +8,7 @@ import (
 
 // Update using the builtin function of yt-dlp
 func UpdateExecutable() error {
-	cmd := exec.Command(config.Instance().GetConfig().DownloaderPath, "-U")
+	cmd := exec.Command(config.Instance().DownloaderPath, "-U")
 
 	err := cmd.Start()
 	if err != nil {

server/utils/file.go

@@ -1,8 +1,6 @@
 package utils
 
 import (
-	"crypto/sha256"
-	"encoding/hex"
 	"io/fs"
 	"regexp"
 	"strings"
@@ -21,9 +19,3 @@ func IsValidEntry(d fs.DirEntry) bool {
 		!strings.HasSuffix(d.Name(), ".part") &&
 		!strings.HasSuffix(d.Name(), ".ytdl")
 }
-
-func ShaSumString(path string) string {
-	h := sha256.New()
-	h.Write([]byte(path))
-	return hex.EncodeToString(h.Sum(nil))
-}