templates editor #62

code refactoring
fixed potential race condition
2023-10-30 11:48:10 +01:00 · 2023-10-29 15:07:42 +01:00 · 2023-10-28 12:10:50 +02:00 · 2023-10-28 10:38:26 +02:00 · 2023-10-28 10:32:28 +02:00 · 2023-10-26 17:53:39 +02:00
56 changed files with 1448 additions and 480 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,15 +1,18 @@
-node_modules
-downloads
 dist
 package-lock.json
 pnpm-lock.yaml
 .pnpm-debug.log
-.parcel-cache
-.git
-src/server/core/*.exe
-src/server/core/yt-dlp
+node_modules
 .env
 *.mp4
 *.ytdl
+*.part
 *.db
+downloads
+.DS_Store
 build/
+yt-dlp-webui
+session.dat
+config.yml
+cookies.txt
+examples/
--- a/.github/workflows/docker-publish.yml
+++ b/.github/workflows/docker-publish.yml
@@ -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
@@ -67,8 +69,8 @@ jobs:
          context: .
          push: true
          platforms: linux/amd64,linux/arm/v7,linux/arm64
-          tags: ${{ secrets.DOCKER_HUB_USERNAME }}/yt-dlp-webui:latest
-          labels: ${{ steps.meta.outputs.labels }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels}}

      - name: Sign the published Docker image
        env:
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ build/
 yt-dlp-webui
 session.dat
 config.yml
+cookies.txt
--- a/.vscode/launch.json
+++ b/.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",
--- a/7
+++ b/7
@@ -1,11 +1,12 @@
-FROM golang:1.20-alpine AS build
+FROM golang:alpine AS build

 RUN apk update && \
-    apk add nodejs npm go
+    apk add nodejs npm

 COPY . /usr/src/yt-dlp-webui

 WORKDIR /usr/src/yt-dlp-webui/frontend
+
 RUN npm install
 RUN npm run build

@@ -26,4 +27,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" ]
--- a/7
+++ b/7
@@ -6,11 +6,10 @@ all:
 	CGO_ENABLED=0 go build -o yt-dlp-webui main.go

 multiarch:
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o yt-dlp-webui_linux-arm main.go
-	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o yt-dlp-webui_linux-arm64 main.go
-	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o yt-dlp-webui_linux-amd64 main.go
 	mkdir -p build
-	mv yt-dlp-webui* build
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm go build -o build/yt-dlp-webui_linux-arm main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o build/yt-dlp-webui_linux-arm64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go

 clean:
 	rm -rf build
--- a/README.md
+++ b/README.md
@@ -15,9 +15,9 @@ The bottleneck remains yt-dlp startup time.
 docker pull marcobaobao/yt-dlp-webui
 ```
 ```sh
-# latest stable
+# latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# latest dev version
+# latest stable version
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```

--- a/examples/Caddyfile
+++ b/examples/Caddyfile
@@ -0,0 +1,5 @@
+resource.yourdomain.tld {
+  handle_path /yt-dlp-webui/* {
+    reverse_proxy  127.0.0.1:3033
+  }
+}
--- a/examples/nginx.conf
+++ b/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;
+        }
+    }
+ }
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,25 +14,23 @@
    "@fontsource/roboto": "^5.0.6",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.5",
+    "fp-ts": "^2.16.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.13.0",
+    "react-router-dom": "^6.17.0",
    "recoil": "^0.7.7",
-    "rxjs": "^7.8.1",
-    "uuid": "^9.0.0"
+    "rxjs": "^7.8.1"
  },
  "devDependencies": {
    "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.3.1",
-    "@types/react": "^18.2.13",
-    "@types/react-dom": "^18.2.6",
-    "@types/react-helmet": "^6.1.6",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@types/react-helmet": "^6.1.8",
    "@types/react-router-dom": "^5.3.3",
-    "@types/uuid": "^9.0.2",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "buffer": "^6.0.3",
-    "typescript": "^5.1.3",
-    "vite": "^4.4.7"
+    "@vitejs/plugin-react-swc": "^3.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.5.0"
  }
 }
--- a/frontend/src/assets/i18n.yaml
+++ b/frontend/src/assets/i18n.yaml
@@ -1,7 +1,7 @@
 ---
 languages:
  english:
-    urlInput: YouTube or other supported service video URL
+    urlInput: Video URL
    statusTitle: Status
    statusReady: Ready
    selectFormatButton: Select format
@@ -36,14 +36,18 @@ languages:
    restartAppMessage: Needs a page reload to take effect
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  french:
    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
    statusTitle: Statut
    statusReady: Prêt
    selectFormatButton: Sélectionner le format
    startButton: Démarrer
-    abortAllButton: Abort All
-    updateBinButton: Mettre à jour le binaire yt-dlp
+    abortAllButton: Tout arrêter
+    updateBinButton: Mettre à jour l'exécutable yt-dlp
    darkThemeButton: Thème sombre
    lightThemeButton: Thème clair
    settingsAnchor: Paramètres
@@ -51,15 +55,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 !
-    formatSelectionEnabler: Active la sélection des formats vidéo/audio
-    themeSelect: 'Theme'
+    toastUpdated: L'exécutable yt-dlp a été mis à jour !
+    formatSelectionEnabler: Activer la sélection des formats vidéo/audio
+    themeSelect: 'Thème'
    languageSelect: 'Langue'
-    overridesAnchor: Surcharges
-    pathOverrideOption: Activation de la surcharge du chemin de sortie
-    filenameOverrideOption: Active la surcharge du nom du fichier de sortie
+    overridesAnchor: Remplacer
+    pathOverrideOption: Activer le remplacement du chemin de sortie
+    filenameOverrideOption: Activer le remplacement du nom du fichier de sortie
    customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
    customPath: Chemin personnalisé
    customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
@@ -71,9 +75,13 @@ 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
+    appTitle: Nom de l'application
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  italian:
-    urlInput: URL di YouTube o di qualsiasi altro servizio supportato
+    urlInput: URL Video
    statusTitle: Stato
    startButton: Inizia
    statusReady: Pronto
@@ -107,6 +115,10 @@ languages:
    restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: Titolo applicazione
+    savedTemplates: Template salvati
+    templatesEditor: Editor template
+    templatesEditorNameLabel: Nome template
+    templatesEditorContentLabel: Contentunto template
  chinese:
    urlInput: YouTube 或其他受支持服务的视频网址
    statusTitle: 状态
@@ -139,9 +151,14 @@ languages:
    splashText: 没有正在进行的下载
    archiveTitle: 归档
    clipboardAction: 复制 URL 到剪贴板
-    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
-    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
-    appTitle: App title
+    playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
+    restartAppMessage: 需要刷新页面才能生效
+    servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+    appTitle: App 标题
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  spanish:
    urlInput: URL de YouTube u otro servicio compatible
    statusTitle: Estado
@@ -176,6 +193,10 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  russian:
    urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
    statusTitle: Статус
@@ -210,6 +231,10 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  korean:
    urlInput: YouTube나 다른 지원되는 사이트의 URL
    statusTitle: 상태
@@ -244,6 +269,10 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  japanese:
    urlInput: YouTubeまたはサポート済み動画のURL
    statusTitle: 状態
@@ -279,6 +308,10 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  catalan:
    urlInput: URL de YouTube o d'un altre servei compatible
    statusTitle: Estat
@@ -313,6 +346,10 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  ukrainian:
    urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
    statusTitle: Статус
@@ -347,6 +384,10 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
  polish:
    urlInput: Adres URL YouTube lub innej obsługiwanej usługi
    statusTitle: Status
@@ -381,3 +422,7 @@ languages:
    playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
    appTitle: App title
+    savedTemplates: Saved templates
+    templatesEditor: Templates editor
+    templatesEditorNameLabel: Template name
+    templatesEditorContentLabel: Template content
--- a/frontend/src/atoms/downloadTemplate.ts
+++ b/frontend/src/atoms/downloadTemplate.ts
@@ -1,9 +1,52 @@
-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({
-  key: 'downloadTemplateState',
-  default: localStorage.getItem('lastDownloadTemplate') ?? '',
+export const cookiesTemplateState = atom({
+  key: 'cookiesTemplateState',
+  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>())
+    )
+  },
+  dangerouslyAllowMutability: true
+})
--- a/frontend/src/atoms/downloads.ts
+++ b/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>({
-  key: 'activeDownloadsState',
-  default: undefined
+export const downloadsState = atom<O.Option<RPCResult[]>>({
+  key: 'downloadsState',
+  default: O.none
+})
+
+export const loadingDownloadsState = selector<boolean>({
+  key: 'loadingDownloadsState',
+  get: ({ get }) => O.isNone(get(downloadsState))
+})
+
+export const activeDownloadsState = selector<RPCResult[]>({
+  key: 'activeDownloadsState',
+  get: ({ get }) => pipe(
+    get(downloadsState),
+    O.getOrElse(() => new Array<RPCResult>())
+  )
 })
--- a/frontend/src/atoms/settings.ts
+++ b/frontend/src/atoms/settings.ts
@@ -153,7 +153,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 +172,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 }) => {
--- a/frontend/src/atoms/toast.ts
+++ b/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
--- a/frontend/src/atoms/ui.ts
+++ b/frontend/src/atoms/ui.ts
@@ -2,5 +2,5 @@ import { atom } from 'recoil'

 export const loadingAtom = atom({
  key: 'loadingAtom',
-  default: false
+  default: true
 })
--- a/frontend/src/components/CookiesTextField.tsx
+++ b/frontend/src/components/CookiesTextField.tsx
@@ -0,0 +1,157 @@
+import { TextField } from '@mui/material'
+import * as A from 'fp-ts/Array'
+import * as E from 'fp-ts/Either'
+import * as O from 'fp-ts/Option'
+import { pipe } from 'fp-ts/lib/function'
+import { useMemo } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { Subject, debounceTime, distinctUntilChanged } from 'rxjs'
+import { cookiesTemplateState } from '../atoms/downloadTemplate'
+import { cookiesState, serverURL } from '../atoms/settings'
+import { useSubscription } from '../hooks/observable'
+import { useToast } from '../hooks/toast'
+import { ffetch } from '../lib/httpClient'
+
+const validateCookie = (cookie: string) => pipe(
+  cookie,
+  cookie => cookie.replace(/\s\s+/g, ' '),
+  cookie => cookie.replaceAll('\t', ' '),
+  cookie => cookie.split(' '),
+  E.of,
+  E.chain(
+    E.fromPredicate(
+      f => f.length === 7,
+      () => `missing parts`
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => f[0].length > 0,
+      () => 'missing domain'
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => f[1] === 'TRUE' || f[1] === 'FALSE',
+      () => `invalid include subdomains`
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => f[2].length > 0,
+      () => 'invalid path'
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => f[3] === 'TRUE' || f[3] === 'FALSE',
+      () => 'invalid secure flag'
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => isFinite(Number(f[4])),
+      () => 'invalid expiration'
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => f[5].length > 0,
+      () => 'invalid name'
+    )
+  ),
+  E.chain(
+    E.fromPredicate(
+      f => f[6].length > 0,
+      () => 'invalid value'
+    )
+  ),
+)
+
+const CookiesTextField: React.FC = () => {
+  const serverAddr = useRecoilValue(serverURL)
+  const [, setCookies] = useRecoilState(cookiesTemplateState)
+  const [savedCookies, setSavedCookies] = useRecoilState(cookiesState)
+
+  const { pushMessage } = useToast()
+  const flag = '--cookies=cookies.txt'
+
+  const cookies$ = useMemo(() => new Subject<string>(), [])
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${serverAddr}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies
+      })
+    })()
+
+  const validateNetscapeCookies = (cookies: string) => pipe(
+    cookies,
+    cookies => cookies.split('\n'),
+    cookies => cookies.filter(f => !f.startsWith('\n')), // empty lines
+    cookies => cookies.filter(f => !f.startsWith('# ')), // comments
+    cookies => cookies.filter(Boolean), // empty lines
+    A.map(validateCookie),
+    A.mapWithIndex((i, either) => pipe(
+      either,
+      E.matchW(
+        (l) => pushMessage(`Error in line ${i + 1}: ${l}`, 'warning'),
+        () => E.isRight(either)
+      ),
+    )),
+    A.filter(Boolean),
+    A.match(
+      () => false,
+      (c) => {
+        pushMessage(`Valid ${c.length} Netscape cookies`, 'info')
+        return true
+      }
+    )
+  )
+
+  useSubscription(
+    cookies$.pipe(
+      debounceTime(650),
+      distinctUntilChanged()
+    ),
+    (cookies) => pipe(
+      cookies,
+      cookies => {
+        setSavedCookies(cookies)
+        return cookies
+      },
+      validateNetscapeCookies,
+      O.fromPredicate(f => f === true),
+      O.match(
+        () => setCookies(''),
+        async () => {
+          pipe(
+            await submitCookies(cookies),
+            E.match(
+              (l) => pushMessage(`${l}`, 'error'),
+              () => {
+                pushMessage(`Saved Netscape cookies`, 'success')
+                setCookies(flag)
+              }
+            )
+          )
+        }
+      )
+    )
+  )
+
+  return (
+    <TextField
+      label="Netscape Cookies"
+      multiline
+      maxRows={20}
+      minRows={4}
+      fullWidth
+      defaultValue={savedCookies}
+      onChange={(e) => cookies$.next(e.currentTarget.value)}
+    />
+  )
+}
+
+export default CookiesTextField
--- a/frontend/src/components/DownloadDialog.tsx
+++ b/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,
-  styled
+  TextField
 } from '@mui/material'
 import AppBar from '@mui/material/AppBar'
 import Dialog from '@mui/material/Dialog'
@@ -23,7 +21,6 @@ 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 {
  forwardRef,
  useMemo,
@@ -31,7 +28,8 @@ import {
  useState,
  useTransition
 } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
@@ -40,6 +38,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,7 +52,7 @@ const Transition = forwardRef(function Transition(
 type Props = {
  open: boolean
  onClose: () => void
-  onDownloadStart: () => void
+  onDownloadStart: (url: string) => void
 }

 export default function DownloadDialog({
@@ -61,41 +60,38 @@ export default function DownloadDialog({
  onClose,
  onDownloadStart
 }: Props) {
-  // recoil state
  const settings = useRecoilValue(settingsState)
  const isConnected = useRecoilValue(connectedState)
  const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
+  const downloadTemplate = useRecoilValue(downloadTemplateState)

-  // ephemeral state
  const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
  const [pickedVideoFormat, setPickedVideoFormat] = useState('')
  const [pickedAudioFormat, setPickedAudioFormat] = useState('')
  const [pickedBestFormat, setPickedBestFormat] = useState('')

-  const [customArgs, setCustomArgs] = useState('')
-  const [downloadPath, setDownloadPath] = useState(0)
+  const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [downloadPath, setDownloadPath] = useState('')

-  const [fileNameOverride, setFilenameOverride] = useState('')
+  const [filenameTemplate, setFilenameTemplate] = useRecoilState(
+    filenameTemplateState
+  )

  const [url, setUrl] = useState('')
  const [workingUrl, setWorkingUrl] = useState('')

  const [isPlaylist, setIsPlaylist] = useState(false)

-  // memos
  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()

  /**
@@ -107,13 +103,13 @@ export default function DownloadDialog({
    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
    if (pickedBestFormat !== '') codes.push(pickedBestFormat)

-    client.download(
-      immediate || url || workingUrl,
-      `${cliArgs.toString()} ${toFormatArgs(codes)} ${customArgs}`,
-      availableDownloadPaths[downloadPath] ?? '',
-      fileNameOverride,
-      isPlaylist,
-    )
+    client.download({
+      url: immediate || url || workingUrl,
+      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      pathOverride: downloadPath ?? '',
+      renameTo: settings.fileRenaming ? filenameTemplate : '',
+      playlist: isPlaylist,
+    })

    setUrl('')
    setWorkingUrl('')
@@ -121,7 +117,7 @@ export default function DownloadDialog({
    setTimeout(() => {
      resetInput()
      setDownloadFormats(undefined)
-      onDownloadStart()
+      onDownloadStart(url)
    }, 250)
  }

@@ -142,45 +138,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)
  }

-  /**
-   * Update the filename override state whenever the input value changes
-   * @param e Input change event
-   */
-  const handleFilenameOverrideChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFilenameOverride(e.target.value)
-    localStorage.setItem('last-filename-override', e.target.value)
+  const handleFilenameTemplateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilenameTemplate(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 urlList = event.target.files
-    const reader = new FileReader()
-    reader.addEventListener('load', $event => {
-      const base64 = $event.target?.result!.toString().split(',')[1]
-      Buffer.from(base64!, 'base64')
-        .toString()
-        .trimEnd()
-        .split('\n')
-        .filter(_url => isValidURL(_url))
-        .forEach(_url => sendUrl(_url))
-    })
-    reader.readAsDataURL(urlList[0])
+  const parseUrlListFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.currentTarget.files
+    if (!files || files.length < 1) {
+      return
+    }
+
+    const file = await files[0].text()
+
+    file
+      .split('\n')
+      .filter(u => isValidURL(u))
+      .forEach(u => sendUrl(u))
  }

  const resetInput = () => {
@@ -190,43 +171,41 @@ export default function DownloadDialog({
    }
  }

-  /* -------------------- styled components -------------------- */
-
-  const Input = styled('input')({
-    display: 'none',
-  })
-
  return (
-    <div>
-      <Dialog
-        fullScreen
-        open={open}
-        onClose={onClose}
-        TransitionComponent={Transition}
-      >
-        <Backdrop
-          sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-          open={isPending}
-        />
-        <AppBar sx={{ position: 'relative' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={onClose}
-              aria-label="close"
-            >
-              <CloseIcon />
-            </IconButton>
-            <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
-              Download
-            </Typography>
-          </Toolbar>
-        </AppBar>
-        <Container sx={{ my: 4 }}>
+    <Dialog
+      fullScreen
+      open={open}
+      onClose={onClose}
+      TransitionComponent={Transition}
+    >
+      <Backdrop
+        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={isPending}
+      />
+      <AppBar sx={{ position: 'relative' }}>
+        <Toolbar>
+          <IconButton
+            edge="start"
+            color="inherit"
+            onClick={onClose}
+            aria-label="close"
+          >
+            <CloseIcon />
+          </IconButton>
+          <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
+            Download
+          </Typography>
+        </Toolbar>
+      </AppBar>
+      <Box sx={{
+        backgroundColor: (theme) => theme.palette.background.default,
+        minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
+      }}>
+        <Container sx={{ my: 4 }} >
          <Grid container spacing={2}>
            <Grid item xs={12}>
              <Paper
+                elevation={4}
                sx={{
                  p: 2,
                  display: 'flex',
@@ -248,11 +227,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 +266,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}
-                        onChange={handleFilenameOverrideChange}
+                        value={filenameTemplate}
+                        onChange={handleFilenameTemplateChange}
                        disabled={
                          !isConnected ||
                          (settings.formatSelection && downloadFormats != null)
@@ -305,22 +286,30 @@ export default function DownloadDialog({
                    settings.pathOverriding &&
                    <Grid item xs={4}>
                      <FormControl fullWidth>
-                        <InputLabel>{i18n.t('customPath')}</InputLabel>
-                        <Select
-                          label={i18n.t('customPath')}
-                          defaultValue={0}
-                          variant={'outlined'}
-                          value={downloadPath}
-                          onChange={(e) => setDownloadPath(Number(e.target.value))}
-                        >
-                          {availableDownloadPaths.map((val: string, idx: number) => (
-                            <MenuItem key={idx} value={idx}>{val}</MenuItem>
-                          ))}
-                        </Select>
+                        <Autocomplete
+                          disablePortal
+                          options={availableDownloadPaths.map((dir) => ({ label: dir, dir }))}
+                          autoHighlight
+                          getOptionLabel={(option) => option.label}
+                          onChange={(_, value) => {
+                            setDownloadPath(value?.dir!)
+                          }}
+                          renderOption={(props, option) => (
+                            <Box
+                              component="li"
+                              sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+                              {...props}>
+                              {option.label}
+                            </Box>
+                          )}
+                          sx={{ width: '100%', mt: 1 }}
+                          renderInput={(params) => <TextField {...params} label={i18n.t('customPath')} />}
+                        />
                      </FormControl>
                    </Grid>
                  }
                </Grid>
+                <ExtraDownloadOptions />
                <Grid container spacing={1} pt={2} justifyContent="space-between">
                  <Grid item>
                    <Button
@@ -376,7 +365,7 @@ export default function DownloadDialog({
            pickedAudioFormat={pickedAudioFormat}
          />}
        </Container>
-      </Dialog>
-    </div>
+      </Box>
+    </Dialog>
  )
 }
--- a/frontend/src/components/Downloads.tsx
+++ b/frontend/src/components/Downloads.tsx
@@ -1,6 +1,6 @@
 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'
@@ -8,15 +8,17 @@ import DownloadsListView from './DownloadsListView'

 const Downloads: React.FC = () => {
  const listView = 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
    }
-  }, [active?.length])
+    setIsLoading(false)
+  }, [loadingDownloads, isLoading])

  if (listView) {
    return (
--- a/frontend/src/components/DownloadsCardView.tsx
+++ b/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()
--- a/frontend/src/components/DownloadsListView.tsx
+++ b/frontend/src/components/DownloadsListView.tsx
@@ -18,7 +18,7 @@ import { ellipsis, formatSpeedMiB, roundMiB } from "../utils"


 const DownloadsListView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState) ?? []
+  const downloads = useRecoilValue(activeDownloadsState)

  const { client } = useRPC()

--- a/frontend/src/components/ExtraDownloadOptions.tsx
+++ b/frontend/src/components/ExtraDownloadOptions.tsx
@@ -0,0 +1,37 @@
+import { Autocomplete, Box, TextField, Typography } from '@mui/material'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { customArgsState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { useI18n } from '../hooks/useI18n'
+
+const ExtraDownloadOptions: React.FC = () => {
+  const { i18n } = useI18n()
+
+  const customTemplates = useRecoilValue(savedTemplatesState)
+  const [, setCustomArgs] = useRecoilState(customArgsState)
+
+  return (
+    <>
+      <Autocomplete
+        disablePortal
+        options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
+        autoHighlight
+        getOptionLabel={(option) => option.label}
+        onChange={(_, value) => {
+          setCustomArgs(value?.content!)
+        }}
+        renderOption={(props, option) => (
+          <Box
+            component="li"
+            sx={{ mr: 2, flexShrink: 0 }}
+            {...props}>
+            {option.label}
+          </Box>
+        )}
+        sx={{ width: '100%', mt: 2 }}
+        renderInput={(params) => <TextField {...params} label={i18n.t('savedTemplates')} />}
+      />
+    </>
+  )
+}
+
+export default ExtraDownloadOptions
--- a/frontend/src/components/HomeActions.tsx
+++ b/frontend/src/components/HomeActions.tsx
@@ -3,27 +3,39 @@ import { useRecoilState } from 'recoil'
 import { loadingAtom } from '../atoms/ui'
 import DownloadDialog from './DownloadDialog'
 import HomeSpeedDial from './HomeSpeedDial'
+import { useToast } from '../hooks/toast'
+import TemplatesEditor from './TemplatesEditor'

 const HomeActions: React.FC = () => {
  const [, setIsLoading] = useRecoilState(loadingAtom)
-  const [openDialog, setOpenDialog] = useState(false)
+
+  const [openDownload, setOpenDownload] = useState(false)
+  const [openEditor, setOpenEditor] = useState(false)
+
+  const { pushMessage } = useToast()

  return (
    <>
      <HomeSpeedDial
-        onOpen={() => setOpenDialog(true)}
+        onDownloadOpen={() => setOpenDownload(true)}
+        onEditorOpen={() => setOpenEditor(true)}
      />
      <DownloadDialog
-        open={openDialog}
+        open={openDownload}
        onClose={() => {
-          setOpenDialog(false)
+          setOpenDownload(false)
          setIsLoading(true)
        }}
-        onDownloadStart={() => {
-          setOpenDialog(false)
+        onDownloadStart={(url) => {
+          pushMessage(`Requested ${url}`, 'info')
+          setOpenDownload(false)
          setIsLoading(true)
        }}
      />
+      <TemplatesEditor
+        open={openEditor}
+        onClose={() => setOpenEditor(false)}
+      />
    </>
  )
 }
--- a/frontend/src/components/HomeSpeedDial.tsx
+++ b/frontend/src/components/HomeSpeedDial.tsx
@@ -1,4 +1,5 @@
 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 {
@@ -12,10 +13,11 @@ 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 { i18n } = useI18n()
@@ -39,10 +41,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`}
-        onClick={onOpen}
+        tooltipTitle={i18n.t('newDownload')}
+        onClick={onDownloadOpen}
      />
    </SpeedDial>
  )
--- a/frontend/src/components/LoadingBackdrop.tsx
+++ b/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>
--- a/frontend/src/components/SocketSubscriber.tsx
+++ b/frontend/src/components/SocketSubscriber.tsx
@@ -1,7 +1,8 @@
-import { useMemo } from 'react'
+import * as O from 'fp-ts/Option'
+import { useEffect, useMemo } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { interval, share, take } from 'rxjs'
-import { activeDownloadsState } from '../atoms/downloads'
+import { share, take, timer } from 'rxjs'
+import { downloadsState } from '../atoms/downloads'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { useSubscription } from '../hooks/observable'
@@ -13,8 +14,8 @@ import { datetimeCompareFunc, isRPCResponse } from '../utils'
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }

 const SocketSubscriber: React.FC<Props> = ({ children }) => {
-  const [, setIsConnected] = useRecoilState(connectedState)
-  const [, setActive] = useRecoilState(activeDownloadsState)
+  const [connected, setIsConnected] = useRecoilState(connectedState)
+  const [, setDownloads] = useRecoilState(downloadsState)

  const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)

@@ -33,21 +34,26 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
    )
  })

-  useSubscription(sharedSocket$,
-    (event) => {
+  useSubscription(
+    sharedSocket$,
+    event => {
      if (!isRPCResponse(event)) { return }
      if (!Array.isArray(event.result)) { return }

-      setActive(
-        (event.result || [])
-          .filter(f => !!f.info.url)
-          .sort((a, b) => datetimeCompareFunc(
-            b.info.created_at,
-            a.info.created_at,
-          ))
-      )
+      if (event.result) {
+        return setDownloads(
+          O.of(event.result
+            .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
+              b.info.created_at,
+              a.info.created_at,
+            ))
+          )
+        )
+      }
+
+      setDownloads(O.none)
    },
-    (err) => {
+    err => {
      console.error(err)
      pushMessage(
        `${i18n.t('rpcConnErr')} (${serverAddressAndPort})`,
@@ -56,7 +62,11 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
    }
  )

-  useSubscription(interval(1000), () => client.running())
+  useEffect(() => {
+    if (connected) {
+      timer(0, 1000).subscribe(() => client.running())
+    }
+  }, [connected])

  return (
    <>{children}</>
--- a/frontend/src/components/TemplatesEditor.tsx
+++ b/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
--- a/frontend/src/lib/httpClient.ts
+++ b/frontend/src/lib/httpClient.ts
@@ -1,13 +1,22 @@
-export async function ffetch<T>(
-  url: string,
-  onSuccess: (res: T) => void,
-  onError: (err: string) => void,
-  opt?: RequestInit,
-) {
+import { tryCatch } from 'fp-ts/TaskEither'
+
+export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
+  () => fetcher<T>(url, opt),
+  (e) => `error while fetching: ${e}`
+)
+
+
+const fetcher = async <T>(url: string, opt?: RequestInit) => {
  const res = await fetch(url, opt)
-  if (!res.ok) {
-    onError(await res.text())
-    return
+
+  if (opt && !opt.headers) {
+    opt.headers = {
+      'Content-Type': 'application/json',
+    }
  }
-  onSuccess(await res.json() as T)
+
+  if (!res.ok) {
+    throw await res.text()
+  }
+  return res.json() as T
 }
--- a/frontend/src/lib/rpcClient.ts
+++ b/frontend/src/lib/rpcClient.ts
@@ -1,8 +1,16 @@
-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
@@ -29,6 +37,13 @@ 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',
@@ -42,33 +57,45 @@ export class RPCClient {
    return data
  }

-  public download(
-    url: string,
-    args: string,
-    pathOverride = '',
-    renameTo = '',
-    playlist?: boolean
-  ) {
-    if (!url) {
+  public download(req: DownloadRequestArgs) {
+    if (!req.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,
-          Params: args.split(" ").map(a => a.trim()),
-          Path: pathOverride,
+          URL: req.url,
+          Params: sanitizedArgs,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
        }]
      })
    }
    this.sendHTTP({
      method: 'Service.Exec',
      params: [{
-        URL: url.split("?list").at(0)!,
-        Params: args.split(" ").map(a => a.trim()),
-        Path: pathOverride,
-        Rename: renameTo,
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
      }]
    })
  }
@@ -78,7 +105,7 @@ export class RPCClient {
      return this.sendHTTP<DLMetadata>({
        method: 'Service.Formats',
        params: [{
-          URL: url.split("?list").at(0)!,
+          URL: url.split('?list').at(0)!,
        }]
      })
    }
--- a/frontend/src/providers/ToasterProvider.tsx
+++ b/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 })))
-      }, 1500)
+        setToasts(t => t.map(t => ({ ...t, open: deletePredicate(t) })))
+      }, 900)

      const cleaner = setInterval(() => {
-        setToasts(t => t.filter((x) => (Date.now() - x.createdAt) < 1500))
-      }, 1750)
+        setToasts(t => t.filter(deletePredicate))
+      }, 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}
--- a/frontend/src/types/index.ts
+++ b/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
+}
--- a/frontend/src/utils.ts
+++ b/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)
@@ -94,3 +75,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
+)
--- a/frontend/src/views/Archive.tsx
+++ b/frontend/src/views/Archive.tsx
@@ -26,23 +26,26 @@ import FolderIcon from '@mui/icons-material/Folder'
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'

-import { Buffer } from 'buffer'
+import { matchW } from 'fp-ts/lib/TaskEither'
+import { pipe } from 'fp-ts/lib/function'
 import { useEffect, useMemo, useState, useTransition } from 'react'
 import { 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 { roundMiB } from '../utils'
+import { base64URLEncode, roundMiB } from '../utils'

 export default function Downloaded() {
  const serverAddr = useRecoilValue(serverURL)
  const navigate = useNavigate()

  const { i18n } = useI18n()
+  const { pushMessage } = useToast()

  const [openDialog, setOpenDialog] = useState(false)

@@ -51,20 +54,24 @@ export default function Downloaded() {

  const [isPending, startTransition] = useTransition()

-  const fetcher = () => ffetch<DirectoryEntry[]>(
-    `${serverAddr}/archive/downloaded`,
-    (d) => files$.next(d),
-    () => navigate('/login'),
-    {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
+  const fetcher = () => pipe(
+    ffetch<DirectoryEntry[]>(
+      `${serverAddr}/archive/downloaded`,
+      {
+        method: 'POST',
+        body: JSON.stringify({
+          subdir: '',
+        })
+      }
+    ),
+    matchW(
+      (e) => {
+        pushMessage(e, 'error')
+        navigate('/login')
      },
-      body: JSON.stringify({
-        subdir: '',
-      })
-    }
-  )
+      (d) => files$.next(d),
+    )
+  )()

  const fetcherSubfolder = (sub: string) => {
    const folders = sub.startsWith('/')
@@ -80,24 +87,32 @@ export default function Downloaded() {
      ? ['.', ..._upperLevel].join('/')
      : _upperLevel.join('/')

-    fetch(`${serverAddr}/archive/downloaded`, {
+    const task = ffetch<DirectoryEntry[]>(`${serverAddr}/archive/downloaded`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ subdir: relpath })
    })
-      .then(res => res.json())
-      .then(data => {
-        files$.next(sub
+
+    pipe(
+      task,
+      matchW(
+        (l) => pushMessage(l, 'error'),
+        (r) => files$.next(sub
          ? [{
-            name: '..',
            isDirectory: true,
+            isVideo: false,
+            modTime: '',
+            name: '..',
            path: upperLevel,
-          }, ...data]
-          : data
+            shaSum: '',
+            size: 0,
+          }, ...r]
+          : r
        )
-      })
+      )
+    )()
  }

  const selectable$ = useMemo(() => files$.pipe(
@@ -138,7 +153,9 @@ 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/d/${encoded}`)
  })

  const onFolderClick = (path: string) => startTransition(() => {
--- a/frontend/src/views/Login.tsx
+++ b/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(`${url}/auth/login`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
@@ -56,9 +62,20 @@ export default function Login() {
      body: JSON.stringify({
        username,
        password,
-      })
+      }),
+      redirect: 'follow'
    })
-    res.ok ? navigateAndReload() : setFormHasError(true)
+
+    pipe(
+      task,
+      matchW(
+        (l) => {
+          setFormHasError(true)
+          pushMessage(l, 'error')
+        },
+        () => navigateAndReload()
+      )
+    )()
  }

  return (
--- a/frontend/src/views/Settings.tsx
+++ b/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'
@@ -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
--- a/go.mod
+++ b/go.mod
@@ -4,11 +4,31 @@ go 1.20

 require (
 	github.com/go-chi/chi/v5 v5.0.10
-	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/google/uuid v1.3.1
 	github.com/gorilla/websocket v1.5.0
 	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
-	golang.org/x/sys v0.12.0
+	golang.org/x/sys v0.13.0
 	gopkg.in/yaml.v3 v3.0.1
 )
+
+require (
+	github.com/dustin/go-humanize v1.0.1 // indirect
+	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
+	github.com/mattn/go-isatty v0.0.16 // indirect
+	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	golang.org/x/mod v0.3.0 // indirect
+	golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 // indirect
+	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
+	lukechampine.com/uint128 v1.2.0 // indirect
+	modernc.org/cc/v3 v3.40.0 // indirect
+	modernc.org/ccgo/v3 v3.16.13 // indirect
+	modernc.org/libc v1.24.1 // indirect
+	modernc.org/mathutil v1.5.0 // indirect
+	modernc.org/memory v1.6.0 // indirect
+	modernc.org/opt v0.1.3 // indirect
+	modernc.org/sqlite v1.26.0 // indirect
+	modernc.org/strutil v1.1.3 // indirect
+	modernc.org/token v1.0.1 // indirect
+)
--- a/go.sum
+++ b/go.sum
@@ -1,22 +1,72 @@
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
 github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
-github.com/goccy/go-json v0.10.2 h1:CrxCmQqYDkv1z7lO7Wbh2HN93uovUHgrECaO5ZrCXAU=
-github.com/goccy/go-json v0.10.2/go.mod h1:6MelG93GURQebXPDq3khkgXZkazVtN9CRI+MGFi0w8I=
+github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
+github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
 github.com/golang-jwt/jwt/v5 v5.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
 github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
-github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
 github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
 github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 h1:Z9n2FFNUXsshfwJMBgNA0RU6/i7WVaAegv3PtuIHPMs=
+github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51/go.mod h1:CzGEWj7cYgsdH8dAjBGEr58BoE7ScuLd+fwFZ44+/x8=
 github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
 github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
-golang.org/x/sys v0.9.0 h1:KS/R3tvhPqvJvwcKfnBHJwwthS11LRhmM5D59eEXa0s=
-golang.org/x/sys v0.9.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.12.0 h1:CM0HF96J0hcLAwsHPJZjfdNzs0gftsLfgKt57wWHJ0o=
-golang.org/x/sys v0.12.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+github.com/mattn/go-isatty v0.0.16 h1:bq3VjFmv/sOjHtdEhmkEV4x1AJtvUvOJ2PFAZ5+peKQ=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
+github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
+golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
+golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
+golang.org/x/mod v0.3.0 h1:RM4zey1++hCTbCVQfnWeKs9/IEsaBLA8vTkd0WVtmH4=
+golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
+golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
+golang.org/x/net v0.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sync v0.0.0-20201020160332-67f06af15bc9/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
+golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
+golang.org/x/sys v0.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
+golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
+golang.org/x/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
+golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 h1:M8tBwCtWD/cZV9DZpFYRUgaymAYAr+aIUTWzDaM3uPs=
+golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
+golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+lukechampine.com/uint128 v1.2.0 h1:mBi/5l91vocEN8otkC5bDLhi2KdCticRiwbdB0O+rjI=
+lukechampine.com/uint128 v1.2.0/go.mod h1:c4eWIwlEGaxC/+H1VguhU4PHXNWDCDMUlWdIWl2j1gk=
+modernc.org/cc/v3 v3.40.0 h1:P3g79IUS/93SYhtoeaHW+kRCIrYaxJ27MFPv+7kaTOw=
+modernc.org/cc/v3 v3.40.0/go.mod h1:/bTg4dnWkSXowUO6ssQKnOV0yMVxDYNIsIrzqTFDGH0=
+modernc.org/ccgo/v3 v3.16.13 h1:Mkgdzl46i5F/CNR/Kj80Ri59hC8TKAhZrYSaqvkwzUw=
+modernc.org/ccgo/v3 v3.16.13/go.mod h1:2Quk+5YgpImhPjv2Qsob1DnZ/4som1lJTodubIcoUkY=
+modernc.org/libc v1.24.1 h1:uvJSeCKL/AgzBo2yYIPPTy82v21KgGnizcGYfBHaNuM=
+modernc.org/libc v1.24.1/go.mod h1:FmfO1RLrU3MHJfyi9eYYmZBfi/R+tqZ6+hQ3yQQUkak=
+modernc.org/mathutil v1.5.0 h1:rV0Ko/6SfM+8G+yKiyI830l3Wuz1zRutdslNoQ0kfiQ=
+modernc.org/mathutil v1.5.0/go.mod h1:mZW8CKdRPY1v87qxC/wUdX5O1qDzXMP5TH3wjfpga6E=
+modernc.org/memory v1.6.0 h1:i6mzavxrE9a30whzMfwf7XWVODx2r5OYXvU46cirX7o=
+modernc.org/memory v1.6.0/go.mod h1:PkUhL0Mugw21sHPeskwZW4D6VscE/GQJOnIpCnW6pSU=
+modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
+modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
+modernc.org/sqlite v1.26.0 h1:SocQdLRSYlA8W99V8YH0NES75thx19d9sB/aFc4R8Lw=
+modernc.org/sqlite v1.26.0/go.mod h1:FL3pVXie73rg3Rii6V/u5BoHlSoyeZeIgKZEgHARyCU=
+modernc.org/strutil v1.1.3 h1:fNMm+oJklMGYfU9Ylcywl0CO5O6nTfaowNsh2wpPjzY=
+modernc.org/strutil v1.1.3/go.mod h1:MEHNA7PdEnEwLvspRMtWTNnp2nnyvMfkimT1NKNAGbw=
+modernc.org/token v1.0.1 h1:A3qvTqOwexpfZZeyI0FeGPDlSWX5pjZu9hF4lU+EKWg=
+modernc.org/token v1.0.1/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
--- a/main.go
+++ b/main.go
@@ -14,11 +14,13 @@ import (
 )

 var (
-	port           int
-	queueSize      int
-	configFile     string
-	downloadPath   string
-	downloaderPath string
+	port              int
+	queueSize         int
+	configFile        string
+	downloadPath      string
+	downloaderPath    string
+	sessionFilePath   string
+	localDatabasePath string

 	requireAuth bool
 	username    string
@@ -40,6 +42,8 @@ func init() {
 	flag.StringVar(&configFile, "conf", "./config.yml", "Config file path")
 	flag.StringVar(&downloadPath, "out", ".", "Where files will be saved")
 	flag.StringVar(&downloaderPath, "driver", "yt-dlp", "yt-dlp executable path")
+	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
+	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")

 	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
 	flag.StringVar(&username, "user", userFromEnv, "Username required for auth")
@@ -57,19 +61,20 @@ func main() {

 	c := config.Instance()

-	c.SetPort(port)
-	c.QueueSize(queueSize)
-	c.DownloadPath(downloadPath)
-	c.DownloaderPath(downloaderPath)
+	c.Port = port
+	c.QueueSize = queueSize
+	c.DownloadPath = downloadPath
+	c.DownloaderPath = downloaderPath
+	c.SessionFilePath = sessionFilePath

-	c.RequireAuth(requireAuth)
-	c.Username(username)
-	c.Password(password)
+	c.RequireAuth = requireAuth
+	c.Username = username
+	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")
 	}

-	server.RunBlocking(port, frontend)
+	server.RunBlocking(port, frontend, localDatabasePath)
 }
--- a/server/config/parser.go
+++ b/server/config/parser.go
@@ -7,76 +7,40 @@ import (
 	"gopkg.in/yaml.v3"
 )

-var lock sync.Mutex
-
-type serverConfig struct {
-	Port           int    `yaml:"port"`
-	DownloadPath   string `yaml:"downloadPath"`
-	DownloaderPath string `yaml:"downloaderPath"`
-	RequireAuth    bool   `yaml:"require_auth"`
-	Username       string `yaml:"username"`
-	Password       string `yaml:"password"`
-	QueueSize      int    `yaml:"queue_size"`
+type Config struct {
+	Port            int    `yaml:"port"`
+	DownloadPath    string `yaml:"downloadPath"`
+	DownloaderPath  string `yaml:"downloaderPath"`
+	RequireAuth     bool   `yaml:"require_auth"`
+	Username        string `yaml:"username"`
+	Password        string `yaml:"password"`
+	QueueSize       int    `yaml:"queue_size"`
+	SessionFilePath string `yaml:"session_file_path"`
 }

-type config struct {
-	cfg serverConfig
-}
+var (
+	instance     *Config
+	instanceOnce sync.Once
+)

-func (c *config) LoadFromFile(filename string) (serverConfig, error) {
-	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 {
+func Instance() *Config {
 	if instance == nil {
-		lock.Lock()
-		defer lock.Unlock()
-		if instance == nil {
-			instance = &config{serverConfig{}}
-		}
+		instanceOnce.Do(func() {
+			instance = &Config{}
+		})
 	}
 	return instance
 }
+
+func (c *Config) LoadFile(filename string) error {
+	fd, err := os.Open(filename)
+	if err != nil {
+		return err
+	}
+
+	if err := yaml.NewDecoder(fd).Decode(c); err != nil {
+		return err
+	}
+
+	return nil
+}
--- a/server/dbutils/migrate.go
+++ b/server/dbutils/migrate.go
@@ -0,0 +1,26 @@
+package dbutils
+
+import (
+	"context"
+	"database/sql"
+)
+
+func AutoMigrate(ctx context.Context, db *sql.DB) error {
+	conn, err := db.Conn(ctx)
+	if err != nil {
+		return err
+	}
+
+	defer conn.Close()
+
+	_, err = db.ExecContext(
+		ctx,
+		`CREATE TABLE IF NOT EXISTS templates (
+			id CHAR(36) PRIMARY KEY,
+			name VARCHAR(255) NOT NULL,
+			content TEXT NOT NULL
+		)`,
+	)
+
+	return err
+}
--- a/server/handlers/archive.go
+++ b/server/handlers/archive.go
@@ -1,8 +1,10 @@
 package handlers

 import (
-	"encoding/hex"
+	"encoding/base64"
+	"encoding/json"
 	"net/http"
+	"net/url"
 	"os"
 	"path/filepath"
 	"sort"
@@ -10,7 +12,6 @@ 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"
 )
@@ -65,7 +66,7 @@ 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)
@@ -129,7 +130,13 @@ 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
+	}
+
+	decoded, err := base64.StdEncoding.DecodeString(path)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
@@ -137,14 +144,14 @@ func SendFile(w http.ResponseWriter, r *http.Request) {

 	decodedStr := string(decoded)

-	root := config.Instance().GetConfig().DownloadPath
+	root := config.Instance().DownloadPath

 	// TODO: further path / file validations
 	if strings.Contains(filepath.Dir(decodedStr), root) {
-		// ctx.Response().Header.Set(
-		// 	"Content-Disposition",
-		// 	"inline; filename="+filepath.Base(decodedStr),
-		// )
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(decodedStr),
+		)

 		http.ServeFile(w, r, decodedStr)
 	}
--- a/server/handlers/login.go
+++ b/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,9 +24,12 @@ 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)
 		return
 	}
--- a/server/internal/common.go
+++ b/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"`
+}
--- a/server/internal/memory_db.go
+++ b/server/internal/memory_db.go
@@ -6,10 +6,12 @@ import (
 	"fmt"
 	"log"
 	"os"
+	"path/filepath"
 	"sync"

 	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

 // In-Memory Thread-Safe Key-Value Storage with optional persistence
@@ -28,7 +30,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 +85,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
 	})
@@ -93,7 +97,9 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 func (m *MemoryDB) Persist() {
 	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)
 	}
@@ -130,6 +136,8 @@ func (m *MemoryDB) Restore() {
 			Url:      proc.Info.URL,
 			Info:     proc.Info,
 			Progress: proc.Progress,
+			Output:   proc.Output,
+			Params:   proc.Params,
 		}

 		m.table.Store(proc.Id, restored)
--- a/server/internal/message_queue.go
+++ b/server/internal/message_queue.go
@@ -16,7 +16,7 @@ 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")
--- a/server/internal/playlist.go
+++ b/server/internal/playlist.go
@@ -1,13 +1,14 @@
 package internal

 import (
+	"encoding/json"
 	"errors"
 	"log"
 	"os/exec"
 	"time"

-	"github.com/goccy/go-json"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )

 type metadata struct {
@@ -17,7 +18,10 @@ type metadata struct {
 }

 func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) 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 {
@@ -50,17 +54,21 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB) error {
 			cli.BgGreen, "Playlist detected", cli.Reset, m.Count, "entries",
 		)

-		for _, meta := range m.Entries {
+		for i, meta := range m.Entries {
+			delta := time.Second.Microseconds() * int64(i+1)
+
 			proc := &Process{
 				Url:      meta.OriginalURL,
 				Progress: DownloadProgress{},
-				Output:   DownloadOutput{},
-				Info:     meta,
-				Params:   req.Params,
+				Output: DownloadOutput{
+					Filename: req.Rename,
+				},
+				Info:   meta,
+				Params: req.Params,
 			}

 			proc.Info.URL = meta.OriginalURL
-			proc.Info.CreatedAt = time.Now().Add(time.Second)
+			proc.Info.CreatedAt = time.Now().Add(time.Duration(delta))

 			db.Set(proc)
 			proc.SetPending()
--- a/server/internal/process.go
+++ b/server/internal/process.go
@@ -2,13 +2,12 @@ package internal

 import (
 	"bufio"
+	"encoding/json"
 	"fmt"
 	"regexp"
 	"sync"
 	"syscall"

-	"github.com/goccy/go-json"
-
 	"log"
 	"os"
 	"os/exec"
@@ -18,6 +17,7 @@ import (
 	"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 +27,6 @@ const template = `download:
 	"speed":%(progress.speed)s
 }`

-var (
-	cfg = config.Instance()
-)
-
 const (
 	StatusPending = iota
 	StatusDownloading
@@ -42,7 +38,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
@@ -74,14 +70,19 @@ func (p *Process) Start() {
 		return !match
 	})

+	p.Params = slices.Filter(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"
 	}
@@ -91,13 +92,14 @@ func (p *Process) Start() {
 		"--newline",
 		"--no-colors",
 		"--no-playlist",
-		"--progress-template", strings.ReplaceAll(template, "\n", ""),
+		"--progress-template",
+		strings.NewReplacer("\n", "", "\t", "", " ", "").Replace(template),
 		"-o",
 		fmt.Sprintf("%s/%s", out.Path, out.Filename),
 	}, 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()
@@ -113,11 +115,11 @@ func (p *Process) Start() {

 	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 +127,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,
@@ -143,7 +155,7 @@ func (p *Process) Start() {
 					p.Url, stdout.Percentage,
 				)
 			}
-		}
+		})
 	}()

 	// ------------- end progress block ------------- //
@@ -192,7 +204,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 {
@@ -245,7 +257,7 @@ func (p *Process) SetPending() {
 }

 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()
--- a/server/middleware/jwt.go
+++ b/server/middleware/jwt.go
@@ -13,7 +13,7 @@ import (

 func Authenticated(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		if !config.Instance().GetConfig().RequireAuth {
+		if !config.Instance().RequireAuth {
 			next.ServeHTTP(w, r)
 			return
 		}
--- a/server/rest/container.go
+++ b/server/rest/container.go
@@ -1,25 +1,31 @@
 package rest

 import (
+	"database/sql"
+
 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 )

-func Container(db *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) {
-	h := Container(db, mq)
+func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) func(chi.Router) {
+	h := Container(db, mdb, mq)

 	return func(r chi.Router) {
 		r.Use(middlewares.Authenticated)
 		r.Post("/exec", h.Exec())
 		r.Get("/running", h.Running())
+		r.Post("/cookies", h.SetCookies())
+		r.Post("/template", h.AddTemplate())
+		r.Get("/template/all", h.GetTemplates())
+		r.Delete("/template/{id}", h.DeleteTemplate())
 	}
 }
--- a/server/rest/handlers.go
+++ b/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"
 )

@@ -54,3 +55,102 @@ 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)
+		}
+	}
+}
--- a/server/rest/provider.go
+++ b/server/rest/provider.go
@@ -1,6 +1,7 @@
 package rest

 import (
+	"database/sql"
 	"sync"

 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -14,11 +15,12 @@ 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{
-			db: db,
-			mq: mq,
+			mdb: mdb,
+			db:  db,
+			mq:  mq,
 		}
 	})
 	return service
--- a/server/rest/service.go
+++ b/server/rest/service.go
@@ -2,14 +2,18 @@ package rest

 import (
 	"context"
+	"database/sql"
 	"errors"
+	"os"

+	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 )

 type Service struct {
-	db *internal.MemoryDB
-	mq *internal.MessageQueue
+	mdb *internal.MemoryDB
+	db  *sql.DB
+	mq  *internal.MessageQueue
 }

 func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
@@ -22,7 +26,7 @@ func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
 		},
 	}

-	id := s.db.Set(p)
+	id := s.mdb.Set(p)
 	s.mq.Publish(p)

 	return id, nil
@@ -33,6 +37,79 @@ 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
+	}
+
+	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
+}
--- a/server/rx/extensions.go
+++ b/server/rx/extensions.go
@@ -2,47 +2,27 @@ package rx

 import "time"

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

 import (
 	"context"
+	"database/sql"
 	"fmt"
 	"io/fs"
 	"log"
@@ -14,23 +15,38 @@ import (

 	"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/dbutils"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/handlers"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/rest"
 	ytdlpRPC "github.com/marcopeocchi/yt-dlp-web-ui/server/rpc"
+
+	_ "modernc.org/sqlite"
 )

 type serverConfig struct {
 	frontend fs.FS
 	port     int
-	db       *internal.MemoryDB
+	mdb      *internal.MemoryDB
+	db       *sql.DB
 	mq       *internal.MessageQueue
 }

-func RunBlocking(port int, frontend fs.FS) {
-	var db internal.MemoryDB
-	db.Restore()
+func RunBlocking(port int, frontend fs.FS, dbPath string) {
+	var mdb internal.MemoryDB
+	mdb.Restore()
+
+	db, err := sql.Open("sqlite", dbPath)
+	if err != nil {
+		log.Fatalln(err)
+	}
+
+	err = dbutils.AutoMigrate(context.Background(), db)
+	if err != nil {
+		log.Fatalln(err)
+	}

 	mq := internal.NewMessageQueue()
 	go mq.Subscriber()
@@ -38,23 +54,24 @@ func RunBlocking(port int, frontend fs.FS) {
 	srv := newServer(serverConfig{
 		frontend: frontend,
 		port:     port,
-		db:       &db,
+		mdb:      &mdb,
 		mq:       mq,
+		db:       db,
 	})

-	go gracefulShutdown(srv, &db)
-	go autoPersist(time.Minute*5, &db)
+	go gracefulShutdown(srv, &mdb)
+	go autoPersist(time.Minute*5, &mdb)

 	log.Fatal(srv.ListenAndServe())
 }

 func newServer(c serverConfig) *http.Server {
-	service := ytdlpRPC.Container(c.db, c.mq)
+	service := ytdlpRPC.Container(c.mdb, c.mq)
 	rpc.Register(service)

 	r := chi.NewRouter()

-	r.Use(middlewares.CORS)
+	r.Use(cors.AllowAll().Handler)
 	r.Use(middleware.Logger)

 	app := http.FileServer(http.FS(c.frontend))
@@ -79,7 +96,7 @@ 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{
 		Addr:    fmt.Sprintf(":%d", c.port),
--- a/server/sys/fs.go
+++ b/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)
--- a/server/updater/update.go
+++ b/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 {
Author	SHA1	Message	Date
marcobaobao	19f9b10844	templates editor #62	2023-10-30 11:48:10 +01:00
marcobaobao	cd5c210eac	code refactoring	2023-10-29 15:07:42 +01:00
marcobaobao	252d2f2845	fixed potential race condition	2023-10-28 12:10:50 +02:00
marcobaobao	c320058af3	bug fix	2023-10-28 10:38:26 +02:00
marcobaobao	062e07aa98	code refactoring, backend code optimization	2023-10-28 10:32:28 +02:00
marcobaobao	2564751405	small fixes	2023-10-26 17:53:39 +02:00
marco.piovanello	ce838b8fb0	Dockerfile refactor	2023-10-25 14:08:00 +02:00
marco.piovanello	1aadce8dd7	Dockerfile refactor	2023-10-25 14:04:02 +02:00
marco.piovanello	d5695077c4	Dockerfile refactor	2023-10-25 13:57:55 +02:00
marco.piovanello	2c238957d0	Dockerfile refactor	2023-10-25 13:55:39 +02:00
marco.piovanello	d47b8496a7	added example nginx and caddy configs	2023-10-25 13:46:13 +02:00
marcobaobao	2f8b4cd1d6	config package code refactor	2023-10-24 16:18:07 +02:00
marcobaobao	b512e996ad	config package refactor	2023-10-24 16:07:38 +02:00
marcobaobao	0c7415df28	code refactoring	2023-10-24 15:29:20 +02:00
marcobaobao	38d8bb8e40	code refactoring	2023-10-24 14:45:55 +02:00
Marco	ba23485b33	97 custom arguments broken (#99 ) * golang debug * handle template in playlist download * code refactoring, dropped goccy go json	2023-10-22 15:54:08 +02:00
Marco	8eb2831bc6	49 feat add cookies (#98 ) * build client side validation and submission * enabled cookies submission, bug fixes	2023-10-21 15:46:24 +02:00
marcobaobao	9361d9ce29	code refactoring	2023-10-20 19:20:00 +02:00
marcobaobao	d100092f35	toaster refactoring	2023-10-20 18:42:48 +02:00
marcobaobao	d64303ccfa	removed fmt.Println	2023-10-20 18:26:10 +02:00
marcobaobao	6688bc3977	fix encoding url in archive	2023-10-20 18:25:33 +02:00
marcobaobao	600475f603	removed buffer polyfill, rewrite with js web standards	2023-10-19 12:12:26 +02:00
marcobaobao	da4aaeac84	code refactoring, fixed playlist downloads sorting	2023-10-19 11:29:56 +02:00
NickHoo	2d75030cbc	fix: Echo customArgs (#96 )	2023-10-12 22:05:39 +02:00
Apix	38bc66cd03	i18n: french (#95 ) Updated french translation	2023-10-07 15:41:36 +02:00
marcobaobao	3efbb9d464	code refactoring	2023-09-27 13:09:13 +02:00
marcobaobao	fa4ba8a211	fix session file path, code refactoring	2023-09-27 13:08:42 +02:00
deluxghost	75ec95041d	i18n: chinese (#92 )	2023-09-27 13:04:35 +02:00
marcobaobao	1b4c8c751b	gha refactor	2023-09-26 10:37:21 +02:00
Marco	4710db25ee	82 session file location (#91 ) * change session file location * makefile refactor * gha refactor	2023-09-26 10:25:14 +02:00