Added favicon

Closes #139

.dockerignore

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

.github/ISSUE_TEMPLATE/bug_report.md

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

.github/workflows/docker-publish.yml

@@ -25,7 +25,7 @@ jobs:
         # v3.1.2
         uses: sigstore/cosign-installer@11086d25041f77fe8fe7b9ea4e48e3b9192b8f19
         with:
-          cosign-release: 'v1.13.6'
+          cosign-release: 'v1.13.1'
 
       - name: Set up QEMU for ARM emulation
         # v2.2.0

.gitignore

@@ -14,8 +14,4 @@ session.dat
 config.yml
 cookies.txt
 __debug*
-ui/
-.idea
-frontend/.pnp.cjs
-frontend/.pnp.loader.mjs
-frontend/.yarn/install-state.gz
+app/

Dockerfile

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

Makefile

@@ -1,25 +1,15 @@
-.PHONY : fe clean all
-
 default:
-	go run main.go
-
-fe:
-	cd frontend && pnpm build
-
-dev:
-	cd frontend && pnpm dev
+	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
 
 all:
-	$(MAKE) fe && cd ..
+	cd frontend && pnpm build && cd ..
 	CGO_ENABLED=0 go build -o yt-dlp-webui main.go
 
 multiarch:
-	$(MAKE) fe
 	mkdir -p build
-	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=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 GOARM=6 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv6 main.go
-	CGO_ENABLED=0 GOOS=linux GOARM=7 GOARCH=arm go build -o build/yt-dlp-webui_linux-armv7 main.go
+	CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -o build/yt-dlp-webui_linux-amd64 main.go
 
 clean:
-	rm -rf build
+	rm -rf build

README.md

@@ -23,9 +23,7 @@ docker pull marcobaobao/yt-dlp-webui
 # latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
 ```
-
-[app.webm](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/91545bc4-233d-4dde-8504-27422cb26964)
-
+![output](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/82bcecaf-4ced-441f-9384-105653abfae4)
 
 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/a32fbdaa-b033-4aed-b914-a66701ace0ce)
 ![image](https://github.com/marcopeocchi/yt-dlp-web-ui/assets/35533749/782c559a-f552-40be-a6fd-10e22f38e85d)
@@ -92,7 +90,6 @@ To enable it just go to the settings page and enable the **Enable video/audio fo
     - As before server address is not specified or simply yt-dlp process takes a lot of time to fire up. (Forking yt-dlp isn't fast especially if you have a lower-end/low-power NAS/server/desktop where the server is running)
 
 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
-## Docker run
 ```sh
 docker pull marcobaobao/yt-dlp-webui
 docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
@@ -136,20 +133,6 @@ docker run -d \
     --qs 2
 ```
 
-### Docker Compose
-```yaml
-services:
-  yt-dlp-webui:
-    image: marcobaobao/yt-dlp-webui
-    ports:
-      - 3033:3033
-    volumes:
-      - <your dir>:/downloads # replace <your dir> with a directory on your host system
-    healthcheck:
-      test: curl -f http://localhost:3033 || exit 1
-    restart: unless-stopped
-```
-
 ## [Prebuilt binaries](https://github.com/marcopeocchi/yt-dlp-web-ui/releases) installation
 
 ```sh
@@ -197,31 +180,16 @@ The config file **will overwrite what have been passed as cli argument**.
 # Simple configuration file for yt-dlp webui
 
 ---
-# Host where server will listen at (default: "0.0.0.0")
-#host: 0.0.0.0
-
-# Port where server will listen at (default: 3033)
 port: 8989
-
-# Directory where downloaded files will be stored (default: ".")
 downloadPath: /home/ren/archive
+downloaderPath: /usr/local/bin/yt-dlp
 
-# [optional] Enable RPC authentication (requires username and password)
+# Optional settings
 require_auth: true
 username: my_username
 password: my_random_secret
 
-# [optional] The download queue size (default: 8)
 queue_size: 4
-
-# [optional] Full path to the yt-dlp (default: "yt-dlp")
-downloaderPath: /usr/local/bin/yt-dlp
-
-# [optional] Directory where the log file will be stored (default: ".")
-#log_path: .
-
-# [optional] Directory where the session database file will be stored (default: ".")
-#session_file_path: .
 ```
 
 ### Systemd integration
@@ -244,29 +212,6 @@ WantedBy=multi-user.target
 systemctl enable yt-dlp-webui
 systemctl start yt-dlp-webui
 ```
-It could be that yt-dlp-webui works correctly when started manually from the console, but with systemd, it does not see the yt-dlp executable, or has issues writing to the database file. One way to fix these issues could be as follows:
-```shell
-cd
-mkdir yt-dlp-webui-workingdir
-# optionally move the already existing database file there:
-mv local.db yt-dlp-webui-workingdir
-nano yt-dlp-webui-workingdir/my.conf
-```
-The config file format is described above; make sure to include the `downloaderPath` setting (the path can possibly be found by running `which yt-dlp`). For example, one could have:
-```
-downloadPath: /stuff/media
-downloaderPath: /home/your_user/.local/bin/yt-dlp
-log_path: /home/your_user/yt-dlp-webui-workingdir
-session_file_path: /home/your_user/yt-dlp-webui-workingdir
-```
-Adjust the Service section in the `/etc/systemd/system/yt-dlp-webui.service` file as follows:
-```
-[Service]
-User=your_user
-Group=your_user
-WorkingDirectory=/home/your_user/yt-dlp-webui-workingdir
-ExecStart=/usr/local/bin/yt-dlp-webui --conf /home/your_user/yt-dlp-webui-workingdir/my.conf
-```
 
 ## Manual installation
 ```sh
@@ -278,9 +223,6 @@ npm run build
 
 go build -o yt-dlp-webui main.go
 ```
-## Open-API
-Navigate to `/openapi` to see the related swagger.
-
 
 ## Extendable
 You dont'like the Material feel?

docker-compose.yml

@@ -1,10 +0,0 @@
-services:
-  yt-dlp-webui:
-    image: marcobaobao/yt-dlp-webui
-    ports:
-      - 3033:3033
-    volumes:
-      - <your dir>:/downloads # replace <your dir> with a directory on your host system
-    healthcheck:
-      test: curl -f http://localhost:3033 || exit 1
-    restart: unless-stopped

env.nix

@@ -1,4 +0,0 @@
-{ pkgs ? import <nixpkgs> {} }:
-  pkgs.mkShell {
-    nativeBuildInputs = with pkgs.buildPackages; [ yt-dlp nodejs_22 yarn-berry go ];
-}

frontend/index.html

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

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-dlp-webui",
-  "version": "3.0.9",
+  "version": "2.10.0",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",
@@ -10,30 +10,29 @@
   "license": "MPL-2.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@fontsource/roboto": "^5.0.13",
-    "@fontsource/roboto-mono": "^5.0.18",
-    "@mui/icons-material": "^5.15.16",
-    "@mui/material": "^5.15.16",
-    "fp-ts": "^2.16.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^6.23.1",
-    "react-virtuoso": "^4.7.11",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@fontsource/roboto-mono": "^5.0.16",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "fp-ts": "^2.16.2",
+    "million": "^2.6.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.2",
     "recoil": "^0.7.7",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@modyfi/vite-plugin-yaml": "^1.1.0",
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
+    "@modyfi/vite-plugin-yaml": "^1.0.4",
+    "@types/node": "^20.11.4",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "million": "^3.1.11",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
   }
 }

frontend/src/Layout.tsx

@@ -1,10 +1,10 @@
 import { ThemeProvider } from '@emotion/react'
-import ArchiveIcon from '@mui/icons-material/Archive'
 import ChevronLeft from '@mui/icons-material/ChevronLeft'
 import Dashboard from '@mui/icons-material/Dashboard'
+import DownloadIcon from '@mui/icons-material/Download'
 import Menu from '@mui/icons-material/Menu'
 import SettingsIcon from '@mui/icons-material/Settings'
-import TerminalIcon from '@mui/icons-material/Terminal'
+import SettingsEthernet from '@mui/icons-material/SettingsEthernet'
 import { Box, createTheme } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'
 import Divider from '@mui/material/Divider'
@@ -16,23 +16,26 @@ import ListItemText from '@mui/material/ListItemText'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { grey } from '@mui/material/colors'
-import { useMemo, useState } from 'react'
+import { Suspense, useMemo, useState } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
+import { connectedState } from './atoms/status'
 import AppBar from './components/AppBar'
 import Drawer from './components/Drawer'
-import Footer from './components/Footer'
+import FreeSpaceIndicator from './components/FreeSpaceIndicator'
 import Logout from './components/Logout'
 import SocketSubscriber from './components/SocketSubscriber'
 import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
+import TerminalIcon from '@mui/icons-material/Terminal'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
 
   const settings = useRecoilValue(settingsState)
+  const isConnected = useRecoilValue(connectedState)
 
   const mode = settings.theme
   const theme = useMemo(() =>
@@ -78,6 +81,21 @@ export default function Layout() {
             >
               {settings.appTitle}
             </Typography>
+            <Suspense fallback={i18n.t('loadingLabel')}>
+              <FreeSpaceIndicator />
+            </Suspense>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              flexWrap: 'wrap',
+              marginLeft: '4px',
+              gap: 3,
+            }}>
+              <SettingsEthernet />
+              <span>
+                {isConnected ? settings.serverAddr : i18n.t('notConnectedText')}
+              </span>
+            </div>
           </Toolbar>
         </AppBar>
         <Drawer variant="permanent" open={open}>
@@ -116,7 +134,7 @@ export default function Layout() {
             }>
               <ListItemButton>
                 <ListItemIcon>
-                  <ArchiveIcon />
+                  <DownloadIcon />
                 </ListItemIcon>
                 <ListItemText primary={i18n.t('archiveButtonLabel')} />
               </ListItemButton>
@@ -163,7 +181,6 @@ export default function Layout() {
           <Outlet />
         </Box>
       </Box>
-      <Footer />
       <Toaster />
     </ThemeProvider>
   )

frontend/src/assets/i18n.yaml

@@ -1,7 +1,7 @@
 ---
 languages:
   english:
-    urlInput: Video URL (one per line)
+    urlInput: Video URL
     statusTitle: Status
     statusReady: Ready
     selectFormatButton: Select format
@@ -34,8 +34,7 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may close this window)
     restartAppMessage: Needs a page reload to take effect
-    servedFromReverseProxyCheckbox: Is behind a reverse proxy
-    urlBase: URL base, for reverse proxy support (subdir), defaults to empty
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
     newDownloadButton: New download
     homeButtonLabel: Home
     archiveButtonLabel: Archive
@@ -50,9 +49,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
-    rpcPollingTimeTitle: RPC polling time
-    rpcPollingTimeDescription: A lower interval results in higher CPU usage (server and client side)
   german:
     urlInput: Video URL
     statusTitle: Status
@@ -102,7 +98,6 @@ languages:
     templatesEditorContentLabel: Vorlagen Inhalt
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   french:
     urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
     statusTitle: Statut
@@ -154,9 +149,8 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   italian:
-    urlInput: URL Video (uno per linea)
+    urlInput: URL Video
     statusTitle: Stato
     startButton: Inizia
     statusReady: Pronto
@@ -203,7 +197,6 @@ languages:
     templatesEditorContentLabel: Contentunto template
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   chinese:
     urlInput: 视频 URL
     statusTitle: 状态
@@ -253,7 +246,6 @@ languages:
     templatesEditorContentLabel: 模板内容
     logsTitle: '日志'
     awaitingLogs: '正在等待日志…'
-    bulkDownload: 'Download files in a zip archive'
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -301,7 +293,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -349,7 +340,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -397,7 +387,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -446,7 +435,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -494,7 +482,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -542,7 +529,6 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -590,4 +576,3 @@ languages:
     templatesEditorContentLabel: Template content
     logsTitle: 'Logs'
     awaitingLogs: 'Awaiting logs...'
-    bulkDownload: 'Download files in a zip archive'

frontend/src/atoms/format.ts

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

frontend/src/atoms/rpc.ts

@@ -1,4 +1,4 @@
-import { atom, selector } from 'recoil'
+import { selector } from 'recoil'
 import { RPCClient } from '../lib/rpcClient'
 import { rpcHTTPEndpoint, rpcWebSocketEndpoint } from './settings'
 
@@ -12,12 +12,3 @@ export const rpcClientState = selector({
     ),
   dangerouslyAllowMutability: true,
 })
-
-export const rpcPollingTimeState = atom({
-  key: 'rpcPollingTimeState',
-  default: Number(localStorage.getItem('rpc-polling-time')) || 1000,
-  effects: [
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('rpc-polling-time', a.toString()))
-  ]
-})

frontend/src/atoms/settings.ts

@@ -64,7 +64,8 @@ export const serverAddressState = atom<string>({
 
 export const serverPortState = atom<number>({
   key: 'serverPortState',
-  default: Number(localStorage.getItem('server-port')) || Number(window.location.port),
+  default: Number(localStorage.getItem('server-port')) ||
+    Number(window.location.port),
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('server-port', a.toString()))
@@ -134,15 +135,6 @@ export const servedFromReverseProxyState = atom({
   ]
 })
 
-export const servedFromReverseProxySubDirState = atom<string>({
-  key: 'servedFromReverseProxySubDirState',
-  default: localStorage.getItem('reverseProxySubDir') ?? '',
-  effects: [
-    ({ onSet }) =>
-      onSet(a => localStorage.setItem('reverseProxySubDir', a))
-  ]
-})
-
 export const appTitleState = atom({
   key: 'appTitleState',
   default: localStorage.getItem('appTitle') ?? 'yt-dlp Web UI',
@@ -154,15 +146,9 @@ export const appTitleState = atom({
 
 export const serverAddressAndPortState = selector({
   key: 'serverAddressAndPortState',
-  get: ({ get }) => {
-    if (get(servedFromReverseProxySubDirState)) {
-      return `${get(serverAddressState)}/${get(servedFromReverseProxySubDirState)}/`
-    }
-    if (get(servedFromReverseProxyState)) {
-      return `${get(serverAddressState)}`
-    }
-    return `${get(serverAddressState)}:${get(serverPortState)}`
-  }
+  get: ({ get }) => get(servedFromReverseProxyState)
+    ? `${get(serverAddressState)}`
+    : `${get(serverAddressState)}:${get(serverPortState)}`
 })
 
 export const serverURL = selector({
@@ -196,7 +182,7 @@ export const cookiesState = atom({
   ]
 })
 
-const themeSelector = selector<ThemeNarrowed>({
+export const themeSelector = selector<ThemeNarrowed>({
   key: 'themeSelector',
   get: ({ get }) => {
     const theme = get(themeState)

frontend/src/atoms/status.ts

@@ -1,11 +1,28 @@
 import { atom, selector } from 'recoil'
 import { rpcClientState } from './rpc'
 
+type StatusState = {
+  connected: boolean,
+  updated: boolean,
+  downloading: boolean,
+}
+
+
 export const connectedState = atom({
   key: 'connectedState',
   default: false
 })
 
+export const updatedBinaryState = atom({
+  key: 'updatedBinaryState',
+  default: false
+})
+
+export const isDownloadingState = atom({
+  key: 'isDownloadingState',
+  default: false
+})
+
 export const freeSpaceBytesState = selector({
   key: 'freeSpaceBytesState',
   get: async ({ get }) => {

frontend/src/atoms/ui.ts

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

frontend/src/components/AppBar.tsx

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

frontend/src/components/DownloadCard.tsx

@@ -16,10 +16,8 @@ import {
   Typography
 } from '@mui/material'
 import { useCallback } from 'react'
-import { useRecoilValue } from 'recoil'
-import { serverURL } from '../atoms/settings'
 import { RPCResult } from '../types'
-import { base64URLEncode, ellipsis, formatSize, formatSpeedMiB, mapProcessStatus } from '../utils'
+import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
 
 type Props = {
   download: RPCResult
@@ -37,8 +35,6 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const serverAddr = useRecoilValue(serverURL)
-
   const isCompleted = useCallback(
     () => download.progress.percentage === '-1',
     [download.progress.percentage]
@@ -51,16 +47,6 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
     [download.progress.percentage, isCompleted]
   )
 
-  const viewFile = (path: string) => {
-    const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
-  }
-
-  const downloadFile = (path: string) => {
-    const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
-  }
-
   return (
     <Card>
       <CardActionArea onClick={() => {
@@ -75,22 +61,14 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
           /> :
           <Skeleton variant="rectangular" height={180} />
         }
-        {download.progress.percentage ?
-          <LinearProgress
-            variant="determinate"
-            value={percentageToNumber()}
-            color={isCompleted() ? "success" : "primary"}
-          /> :
-          null
-        }
         <CardContent>
           {download.info.title !== '' ?
             <Typography gutterBottom variant="h6" component="div">
-              {ellipsis(download.info.title, 100)}
+              {ellipsis(download.info.title, 54)}
             </Typography> :
             <Skeleton />
           }
-          <Stack direction="row" spacing={0.5} py={1}>
+          <Stack direction="row" spacing={1} py={2}>
             <Chip
               label={
                 isCompleted()
@@ -108,10 +86,18 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
               {!isCompleted() ? formatSpeedMiB(download.progress.speed) : ''}
             </Typography>
             <Typography>
-              {formatSize(download.info.filesize_approx ?? 0)}
+              {roundMiB(download.info.filesize_approx ?? 0)}
             </Typography>
             <Resolution resolution={download.info.resolution} />
           </Stack>
+          {download.progress.percentage ?
+            <LinearProgress
+              variant="determinate"
+              value={percentageToNumber()}
+              color={isCompleted() ? "secondary" : "primary"}
+            /> :
+            null
+          }
         </CardContent>
       </CardActionArea>
       <CardActions>
@@ -123,26 +109,6 @@ const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
         >
           {isCompleted() ? "Clear" : "Stop"}
         </Button>
-        {isCompleted() &&
-          <>
-            <Button
-              variant="contained"
-              size="small"
-              color="primary"
-              onClick={() => downloadFile(download.output.savedFilePath)}
-            >
-              Download
-            </Button>
-            <Button
-              variant="contained"
-              size="small"
-              color="primary"
-              onClick={() => viewFile(download.output.savedFilePath)}
-            >
-              View
-            </Button>
-          </>
-        }
       </CardActions>
     </Card>
   )

frontend/src/components/DownloadDialog.tsx

@@ -26,19 +26,21 @@ import {
   Suspense,
   forwardRef,
   useEffect,
+  useMemo,
   useRef,
   useState,
   useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
-import { settingsState } from '../atoms/settings'
+import { latestCliArgumentsState, settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
+import { CliArguments } from '../lib/argsParser'
 import type { DLMetadata } from '../types'
-import { toFormatArgs } from '../utils'
+import { isValidURL, toFormatArgs } from '../utils'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
 
 const Transition = forwardRef(function Transition(
@@ -69,6 +71,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const [pickedBestFormat, setPickedBestFormat] = useState('')
 
   const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [, setCliArgs] = useRecoilState(latestCliArgumentsState)
 
   const [downloadPath, setDownloadPath] = useState('')
 
@@ -77,9 +80,14 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   )
 
   const [url, setUrl] = useState('')
+  const [workingUrl, setWorkingUrl] = useState('')
 
   const [isPlaylist, setIsPlaylist] = useState(false)
 
+  const argsBuilder = useMemo(() =>
+    new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
+  )
+
   const { i18n } = useI18n()
   const { client } = useRPC()
 
@@ -95,36 +103,35 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   /**
     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
   */
-  const sendUrl = async (immediate?: string) => {
-    for (const line of url.split('\n')) {
-      const codes = new Array<string>()
-      if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
-      if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
-      if (pickedBestFormat !== '') codes.push(pickedBestFormat)
+  const sendUrl = (immediate?: string) => {
+    const codes = new Array<string>()
+    if (pickedVideoFormat !== '') codes.push(pickedVideoFormat)
+    if (pickedAudioFormat !== '') codes.push(pickedAudioFormat)
+    if (pickedBestFormat !== '') codes.push(pickedBestFormat)
 
-      await new Promise(r => setTimeout(r, 10))
-      client.download({
-        url: immediate || line,
-        args: `${toFormatArgs(codes)} ${downloadTemplate}`,
-        pathOverride: downloadPath ?? '',
-        renameTo: settings.fileRenaming ? filenameTemplate : '',
-        playlist: isPlaylist,
-      })
-
-      setTimeout(() => {
-        resetInput()
-        setDownloadFormats(undefined)
-        onDownloadStart(immediate || line)
-      }, 100)
-    }
+    client.download({
+      url: immediate || url || workingUrl,
+      args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      pathOverride: downloadPath ?? '',
+      renameTo: settings.fileRenaming ? filenameTemplate : '',
+      playlist: isPlaylist,
+    })
 
     setUrl('')
+    setWorkingUrl('')
+
+    setTimeout(() => {
+      resetInput()
+      setDownloadFormats(undefined)
+      onDownloadStart(immediate || url || workingUrl)
+    }, 250)
   }
 
   /**
    * Retrive url from input and display the formats selection view
    */
   const sendUrlFormatSelection = () => {
+    setWorkingUrl(url)
     setUrl('')
     setPickedAudioFormat('')
     setPickedVideoFormat('')
@@ -159,6 +166,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
 
     file
       .split('\n')
+      .filter(u => isValidURL(u))
       .forEach(u => sendUrl(u))
   }
 
@@ -199,7 +207,7 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
         backgroundColor: (theme) => theme.palette.background.default,
         minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
       }}>
-        <Container sx={{ my: 4 }}>
+        <Container sx={{ my: 4 }} >
           <Grid container spacing={2}>
             <Grid item xs={12}>
               <Paper
@@ -212,7 +220,6 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
               >
                 <Grid container>
                   <TextField
-                    multiline
                     fullWidth
                     ref={urlInputRef}
                     label={i18n.t('urlInput')}
@@ -320,6 +327,19 @@ const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
                         label={i18n.t('playlistCheckbox')}
                       />
                     </Grid>
+                    <Grid item>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                          />
+                        }
+                        checked={argsBuilder.extractAudio}
+                        onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                        disabled={settings.formatSelection}
+                        label={i18n.t('extractAudioCheckbox')}
+                      />
+                    </Grid>
                   </Grid>
                   <Grid item>
                     <Button

frontend/src/components/Downloads.tsx

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

frontend/src/components/DownloadsCardView.tsx

@@ -16,10 +16,10 @@ const DownloadsCardView: React.FC = () => {
   const abort = (id: string) => client.kill(id)
 
   return (
-    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12, xl: 12 }} pt={2}>
+    <Grid container spacing={{ xs: 2, md: 2 }} columns={{ xs: 4, sm: 8, md: 12 }} pt={2}>
       {
         downloads.map(download => (
-          <Grid item xs={4} sm={8} md={6} xl={4} key={download.id}>
+          <Grid item xs={4} sm={8} md={6} key={download.id}>
             <DownloadCard
               download={download}
               onStop={() => abort(download.id)}

frontend/src/components/DownloadsListView.tsx

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

frontend/src/components/DownloadsTableView.tsx

@@ -1,213 +0,0 @@
-import DeleteIcon from '@mui/icons-material/Delete'
-import DownloadIcon from '@mui/icons-material/Download'
-import DownloadDoneIcon from '@mui/icons-material/DownloadDone'
-import FileDownloadIcon from '@mui/icons-material/FileDownload'
-import SmartDisplayIcon from '@mui/icons-material/SmartDisplay'
-import StopCircleIcon from '@mui/icons-material/StopCircle'
-import {
-  Box,
-  ButtonGroup,
-  IconButton,
-  LinearProgress,
-  LinearProgressProps,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Typography
-} from "@mui/material"
-import { forwardRef } from 'react'
-import { TableComponents, TableVirtuoso } from 'react-virtuoso'
-import { useRecoilValue } from 'recoil'
-import { activeDownloadsState } from '../atoms/downloads'
-import { serverURL } from '../atoms/settings'
-import { useRPC } from '../hooks/useRPC'
-import { RPCResult } from '../types'
-import { base64URLEncode, formatSize, formatSpeedMiB } from "../utils"
-
-const columns = [
-  {
-    width: 8,
-    label: 'Status',
-    dataKey: 'status',
-    numeric: false,
-  },
-  {
-    width: 500,
-    label: 'Title',
-    dataKey: 'title',
-    numeric: false,
-  },
-  {
-    width: 50,
-    label: 'Speed',
-    dataKey: 'speed',
-    numeric: true,
-  },
-  {
-    width: 150,
-    label: 'Progress',
-    dataKey: 'progress',
-    numeric: true,
-  },
-  {
-    width: 80,
-    label: 'Size',
-    dataKey: 'size',
-    numeric: true,
-  },
-  {
-    width: 100,
-    label: 'Added on',
-    dataKey: 'addedon',
-    numeric: true,
-  },
-  {
-    width: 80,
-    label: 'Actions',
-    dataKey: 'actions',
-    numeric: true,
-  },
-] as const
-
-function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center' }}>
-      <Box sx={{ width: '100%', mr: 1 }}>
-        <LinearProgress variant="determinate" {...props} />
-      </Box>
-      <Box sx={{ minWidth: 35 }}>
-        <Typography variant="body2" color="text.secondary">{`${Math.round(
-          props.value,
-        )}%`}</Typography>
-      </Box>
-    </Box>
-  )
-}
-
-const VirtuosoTableComponents: TableComponents<RPCResult> = {
-  Scroller: forwardRef<HTMLDivElement>((props, ref) => (
-    <TableContainer {...props} ref={ref} />
-  )),
-  Table: (props) => (
-    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed', mt: 2 }} size='small' />
-  ),
-  TableHead,
-  TableRow: ({ item: _item, ...props }) => <TableRow {...props} />,
-  TableBody: forwardRef<HTMLTableSectionElement>((props, ref) => (
-    <TableBody {...props} ref={ref} />
-  )),
-}
-
-function fixedHeaderContent() {
-  return (
-    <TableRow>
-      {columns.map((column) => (
-        <TableCell
-          key={column.dataKey}
-          variant="head"
-          align={column.numeric || false ? 'right' : 'left'}
-          style={{ width: column.width }}
-        >
-          {column.label}
-        </TableCell>
-      ))}
-    </TableRow>
-  )
-}
-
-const DownloadsTableView: React.FC = () => {
-  const downloads = useRecoilValue(activeDownloadsState)
-  const serverAddr = useRecoilValue(serverURL)
-  const { client } = useRPC()
-
-  const abort = (id: string) => client.kill(id)
-
-  const viewFile = (path: string) => {
-    const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
-  }
-
-  const downloadFile = (path: string) => {
-    const encoded = base64URLEncode(path)
-    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
-  }
-
-  function rowContent(_index: number, download: RPCResult) {
-    return (
-      <>
-        <TableCell>
-          {download.progress.percentage === '-1'
-            ? <DownloadDoneIcon color="primary" />
-            : <DownloadIcon color="primary" />
-          }
-        </TableCell>
-        <TableCell>{download.info.title}</TableCell>
-        <TableCell align="right">{formatSpeedMiB(download.progress.speed)}</TableCell>
-        <TableCell align="right">
-          <LinearProgressWithLabel
-            sx={{ height: '16px' }}
-            value={
-              download.progress.percentage === '-1'
-                ? 100
-                : Number(download.progress.percentage.replace('%', ''))
-            }
-            variant={
-              download.progress.process_status === 0
-                ? 'indeterminate'
-                : 'determinate'
-            }
-            color={download.progress.percentage === '-1' ? 'primary' : 'primary'}
-          />
-        </TableCell>
-        <TableCell align="right">{formatSize(download.info.filesize_approx ?? 0)}</TableCell>
-        <TableCell align="right">
-          {new Date(download.info.created_at).toLocaleString()}
-        </TableCell>
-        <TableCell align="right">
-          <ButtonGroup>
-            <IconButton
-              size="small"
-              onClick={() => abort(download.id)}
-            >
-              {download.progress.percentage === '-1' ? <DeleteIcon /> : <StopCircleIcon />}
-
-            </IconButton>
-            {download.progress.percentage === '-1' &&
-              <>
-                <IconButton
-                  size="small"
-                  onClick={() => viewFile(download.output.savedFilePath)}
-                >
-                  <SmartDisplayIcon />
-                </IconButton>
-                <IconButton
-                  size="small"
-                  onClick={() => downloadFile(download.output.savedFilePath)}
-                >
-                  <FileDownloadIcon />
-                </IconButton>
-              </>
-            }
-          </ButtonGroup>
-        </TableCell>
-      </>
-    )
-  }
-
-  return (
-    <Box style={{ height: downloads.length === 0 ? '0vh' : '80vh', width: '100%' }}>
-      <TableVirtuoso
-        hidden={downloads.length === 0}
-        data={downloads}
-        components={VirtuosoTableComponents}
-        fixedHeaderContent={fixedHeaderContent}
-        itemContent={rowContent}
-      />
-    </Box>
-  )
-}
-
-export default DownloadsTableView

frontend/src/components/ErrorBoundary.tsx

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

frontend/src/components/ExtraDownloadOptions.tsx

@@ -15,12 +15,6 @@ const ExtraDownloadOptions: React.FC = () => {
         disablePortal
         options={customTemplates.map(({ name, content }) => ({ label: name, content }))}
         autoHighlight
-        defaultValue={
-          customTemplates
-            .filter(({ id, name }) => id === "0" || name === "default")
-            .map(({ name, content }) => ({ label: name, content }))
-            .at(0)
-        }
         getOptionLabel={(option) => option.label}
         onChange={(_, value) => {
           setCustomArgs(value?.content!)

frontend/src/components/Footer.tsx

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

frontend/src/components/FreeSpaceIndicator.tsx

@@ -1,7 +1,7 @@
 import StorageIcon from '@mui/icons-material/Storage'
 import { useRecoilValue } from 'recoil'
 import { freeSpaceBytesState } from '../atoms/status'
-import { formatSize } from '../utils'
+import { formatGiB } from '../utils'
 
 const FreeSpaceIndicator = () => {
   const freeSpace = useRecoilValue(freeSpaceBytesState)
@@ -15,7 +15,7 @@ const FreeSpaceIndicator = () => {
     }}>
       <StorageIcon />
       <span>
-        {formatSize(freeSpace)}
+        {formatGiB(freeSpace)}
       </span>
     </div>
   )

frontend/src/components/HomeActions.tsx

@@ -27,7 +27,6 @@ const HomeActions: React.FC = () => {
             setOpenDownload(false)
             setIsLoading(true)
           }}
-          // TODO: handle optimistic UI update
           onDownloadStart={(url) => {
             pushMessage(`Requested ${url}`, 'info')
             setOpenDownload(false)

frontend/src/components/HomeSpeedDial.tsx

@@ -1,16 +1,14 @@
 import AddCircleIcon from '@mui/icons-material/AddCircle'
 import BuildCircleIcon from '@mui/icons-material/BuildCircle'
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever'
-import FolderZipIcon from '@mui/icons-material/FolderZip'
 import FormatListBulleted from '@mui/icons-material/FormatListBulleted'
-import ViewAgendaIcon from '@mui/icons-material/ViewAgenda'
 import {
   SpeedDial,
   SpeedDialAction,
   SpeedDialIcon
 } from '@mui/material'
-import { useRecoilState, useRecoilValue } from 'recoil'
-import { listViewState, serverURL } from '../atoms/settings'
+import { useRecoilState } from 'recoil'
+import { listViewState } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 
@@ -20,8 +18,7 @@ type Props = {
 }
 
 const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
-  const serverAddr = useRecoilValue(serverURL)
-  const [listView, setListView] = useRecoilState(listViewState)
+  const [, setListView] = useRecoilState(listViewState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
@@ -31,19 +28,14 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
   return (
     <SpeedDial
       ariaLabel="Home speed dial"
-      sx={{ position: 'absolute', bottom: 64, right: 24 }}
+      sx={{ position: 'absolute', bottom: 32, right: 32 }}
       icon={<SpeedDialIcon />}
     >
       <SpeedDialAction
-        icon={listView ? <ViewAgendaIcon /> : <FormatListBulleted />}
-        tooltipTitle={listView ? 'Card view' : 'Table view'}
+        icon={<FormatListBulleted />}
+        tooltipTitle={`Table view`}
         onClick={() => setListView(state => !state)}
       />
-      <SpeedDialAction
-        icon={<FolderZipIcon />}
-        tooltipTitle={i18n.t('bulkDownload')}
-        onClick={() => window.open(`${serverAddr}/archive/bulk?token=${localStorage.getItem('token')}`)}
-      />
       <SpeedDialAction
         icon={<DeleteForeverIcon />}
         tooltipTitle={i18n.t('abortAllButton')}

frontend/src/components/LogTerminal.tsx

@@ -1,3 +1,4 @@
+import { Box, CircularProgress, Container, Paper, Typography } from '@mui/material'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useRecoilValue } from 'recoil'
 import { serverURL } from '../atoms/settings'
@@ -6,15 +7,14 @@ import { useI18n } from '../hooks/useI18n'
 const token = localStorage.getItem('token')
 
 const LogTerminal: React.FC = () => {
-  const [logBuffer, setLogBuffer] = useState<string[]>([])
-  const [isConnecting, setIsConnecting] = useState(true)
-
-  const boxRef = useRef<HTMLDivElement>(null)
-
   const serverAddr = useRecoilValue(serverURL)
 
   const { i18n } = useI18n()
 
+  const [logBuffer, setLogBuffer] = useState<string[]>([])
+
+  const boxRef = useRef<HTMLDivElement>(null)
+
   const eventSource = useMemo(
     () => new EventSource(`${serverAddr}/log/sse?token=${token}`),
     [serverAddr]
@@ -23,7 +23,7 @@ const LogTerminal: React.FC = () => {
   useEffect(() => {
     eventSource.addEventListener('log', event => {
       const msg: string[] = JSON.parse(event.data)
-      setLogBuffer(buff => [...buff, ...msg].slice(-500))
+      setLogBuffer(buff => [...buff, ...msg].slice(-100))
 
       boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
     })
@@ -32,51 +32,59 @@ const LogTerminal: React.FC = () => {
     return () => eventSource.close()
   }, [eventSource])
 
-  useEffect(() => {
-    eventSource.onopen = () => setIsConnecting(false)
-  }, [eventSource])
-
   const logEntryStyle = (data: string) => {
-    const sx = {}
-
     if (data.includes("level=ERROR")) {
-      return { ...sx, color: 'red' }
+      return { color: 'red' }
     }
     if (data.includes("level=WARN")) {
-      return { ...sx, color: 'orange' }
+      return { color: 'orange' }
     }
-
-    return sx
+    return {}
   }
 
   return (
-
-    <div
-      ref={boxRef}
-      style={{
-        fontFamily: 'Roboto Mono',
-        height: '70.5vh',
-        overflowY: 'auto',
-        overflowX: 'auto',
-        fontSize: '13.5px',
-        fontWeight: '600',
-        backgroundColor: 'black',
-        color: 'white',
-        padding: '0.5rem',
-        borderRadius: '0.25rem'
-      }}
-    >
-      {isConnecting ? <div>{'Connecting...'}</div> : <div>{'Connected!'}</div>}
-
-      {logBuffer.length === 0 && <div>{i18n.t('awaitingLogs')}</div>}
-
-      {logBuffer.map((log, idx) => (
-        <div key={idx} style={logEntryStyle(log)}>
-          {log}
-        </div>
-      ))}
-    </div>
-
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Paper
+        sx={{
+          p: 2.5,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
+        <Typography py={1} variant="h5" color="primary">
+          {i18n.t('logsTitle')}
+        </Typography>
+        {(logBuffer.length === 0) && <Box sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyItems: 'center',
+          alignItems: 'center',
+          gap: 1
+        }}>
+          <CircularProgress color="primary" size={32} />
+          <Typography py={1} variant="subtitle2" >
+            {i18n.t('awaitingLogs')}
+          </Typography>
+        </Box>
+        }
+        <Box
+          ref={boxRef}
+          sx={{
+            fontFamily: 'Roboto Mono',
+            height: '75.5vh',
+            overflowY: 'auto',
+            overflowX: 'auto',
+            fontSize: '15px'
+          }}
+        >
+          {logBuffer.map((log, idx) => (
+            <Box key={idx} sx={logEntryStyle(log)}>
+              {log}
+            </Box>
+          ))}
+        </Box>
+      </Paper>
+    </Container >
   )
 }
 

frontend/src/components/Logout.tsx

@@ -1,10 +1,13 @@
 import LogoutIcon from '@mui/icons-material/Logout'
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import { useNavigate } from 'react-router-dom'
+import { useRecoilValue } from 'recoil'
+import { serverURL } from '../atoms/settings'
 import { useI18n } from '../hooks/useI18n'
 
 export default function Logout() {
   const navigate = useNavigate()
+  const url = useRecoilValue(serverURL)
 
   const logout = async () => {
     localStorage.removeItem('token')

frontend/src/components/SocketSubscriber.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
-import { rpcPollingTimeState } from '../atoms/rpc'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
 import { useSubscription } from '../hooks/observable'
@@ -20,7 +19,6 @@ const SocketSubscriber: React.FC<Props> = () => {
   const [, setDownloads] = useRecoilState(downloadsState)
 
   const serverAddressAndPort = useRecoilValue(serverAddressAndPortState)
-  const rpcPollingTime = useRecoilValue(rpcPollingTimeState)
 
   const { i18n } = useI18n()
   const { client } = useRPC()
@@ -54,7 +52,7 @@ const SocketSubscriber: React.FC<Props> = () => {
             .filter(f => !!f.info.url).sort((a, b) => datetimeCompareFunc(
               b.info.created_at,
               a.info.created_at,
-            )),
+            ))
           )
         )
       }
@@ -72,10 +70,11 @@ const SocketSubscriber: React.FC<Props> = () => {
 
   useEffect(() => {
     if (connected) {
-      const sub = timer(0, rpcPollingTime).subscribe(() => client.running())
+      const sub = timer(0, 1000).subscribe(() => client.running())
+
       return () => sub.unsubscribe()
     }
-  }, [connected, client, rpcPollingTime])
+  }, [connected, client])
 
   return null
 }

frontend/src/components/VersionIndicator.tsx

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

frontend/src/index.tsx

@@ -6,6 +6,7 @@ import '@fontsource/roboto/300.css'
 import '@fontsource/roboto/400.css'
 import '@fontsource/roboto/500.css'
 import '@fontsource/roboto/700.css'
+import '@fontsource/roboto/700.css'
 
 import '@fontsource/roboto-mono'
 

frontend/src/lib/argsParser.ts

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

frontend/src/types/index.ts

@@ -45,9 +45,6 @@ export type RPCResult = Readonly<{
   id: string
   progress: DownloadProgress
   info: DownloadInfo
-  output: {
-    savedFilePath: string
-  }
 }>
 
 export type RPCParams = {

frontend/src/utils.ts

@@ -1,6 +1,11 @@
 import { pipe } from 'fp-ts/lib/function'
 import type { RPCResponse } from "./types"
 
+/**
+ * Validate an ip v4 via regex
+ * @param {string} ipAddr 
+ * @returns ip validity test
+ */
 export function validateIP(ipAddr: string): boolean {
   let ipRegex = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/gm
   return ipRegex.test(ipAddr)
@@ -15,10 +20,17 @@ export function validateDomain(url: string): boolean {
   return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
 }
 
-export const ellipsis = (str: string, lim: number) =>
-  str.length > lim
-    ? `${str.substring(0, lim)}...`
-    : str
+export function isValidURL(url: string): boolean {
+  let urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  return urlRegex.test(url)
+}
+
+export function ellipsis(str: string, lim: number): string {
+  if (str) {
+    return str.length > lim ? `${str.substring(0, lim)}...` : str
+  }
+  return ''
+}
 
 export function toFormatArgs(codes: string[]): string {
   if (codes.length > 1) {
@@ -30,21 +42,14 @@ export function toFormatArgs(codes: string[]): string {
   return ''
 }
 
-export function formatSize(bytes: number): string {
-  const threshold = 1024
-  const units = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB']
+export const formatGiB = (bytes: number) =>
+  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
 
-  let i = 0
-  while (bytes >= threshold) {
-    bytes /= threshold
-    i = i + 1
-  }
-
-  return `${bytes.toFixed(i == 0 ? 0 : 2)} ${units.at(i)}`
-}
+export const roundMiB = (bytes: number) =>
+  `${(bytes / 1_000_000).toFixed(2)} MiB`
 
 export const formatSpeedMiB = (val: number) =>
-  `${(val / 1_048_576).toFixed(2)} MiB/s`
+  `${roundMiB(val)}/s`
 
 export const datetimeCompareFunc = (a: string, b: string) =>
   new Date(a).getTime() - new Date(b).getTime()

frontend/src/views/Archive.tsx

@@ -41,7 +41,7 @@ import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
 import { DirectoryEntry } from '../types'
-import { base64URLEncode, formatSize } from '../utils'
+import { base64URLEncode, roundMiB } from '../utils'
 
 export default function Downloaded() {
   const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
@@ -182,7 +182,7 @@ export default function Downloaded() {
 
   return (
     <Container
-      maxWidth="xl"
+      maxWidth="lg"
       sx={{ mt: 4, mb: 4, height: '100%' }}
       onClick={() => setShowMenu(false)}
     >
@@ -237,7 +237,7 @@ export default function Downloaded() {
                     variant="caption"
                     component="span"
                   >
-                    {formatSize(file.size)}
+                    {roundMiB(file.size)}
                   </Typography>
                   }
                   {!file.isDirectory && <>
@@ -274,8 +274,8 @@ export default function Downloaded() {
         </List>
       </Paper>
       <SpeedDial
-        ariaLabel='archive actions'
-        sx={{ position: 'absolute', bottom: 64, right: 24 }}
+        ariaLabel="SpeedDial basic example"
+        sx={{ position: 'absolute', bottom: 32, right: 32 }}
         icon={<SpeedDialIcon />}
       >
         <SpeedDialAction

frontend/src/views/Home.tsx

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

frontend/src/views/Settings.tsx

@@ -4,6 +4,7 @@ import {
   Container,
   FormControl,
   FormControlLabel,
+  FormGroup,
   Grid,
   InputAdornment,
   InputLabel,
@@ -11,7 +12,6 @@ import {
   Paper,
   Select,
   SelectChangeEvent,
-  Slider,
   Stack,
   Switch,
   TextField,
@@ -27,7 +27,6 @@ import {
   map,
   takeWhile
 } from 'rxjs'
-import { rpcPollingTimeState } from '../atoms/rpc'
 import {
   Language,
   Theme,
@@ -37,9 +36,9 @@ import {
   formatSelectionState,
   languageState,
   languages,
+  latestCliArgumentsState,
   pathOverridingState,
   servedFromReverseProxyState,
-  servedFromReverseProxySubDirState,
   serverAddressState,
   serverPortState,
   themeState
@@ -48,25 +47,21 @@ import CookiesTextField from '../components/CookiesTextField'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
+import { CliArguments } from '../lib/argsParser'
 import { validateDomain, validateIP } from '../utils'
 
 // NEED ABSOLUTELY TO BE SPLIT IN MULTIPLE COMPONENTS
 export default function Settings() {
   const [reverseProxy, setReverseProxy] = useRecoilState(servedFromReverseProxyState)
-  const [baseURL, setBaseURL] = useRecoilState(servedFromReverseProxySubDirState)
-
   const [formatSelection, setFormatSelection] = useRecoilState(formatSelectionState)
   const [pathOverriding, setPathOverriding] = useRecoilState(pathOverridingState)
   const [fileRenaming, setFileRenaming] = useRecoilState(fileRenamingState)
   const [enableArgs, setEnableArgs] = useRecoilState(enableCustomArgsState)
-
   const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
   const [serverPort, setServerPort] = useRecoilState(serverPortState)
-
-  const [pollingTime, setPollingTime] = useRecoilState(rpcPollingTimeState)
   const [language, setLanguage] = useRecoilState(languageState)
   const [appTitle, setApptitle] = useRecoilState(appTitleState)
-
+  const [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
   const [theme, setTheme] = useRecoilState(themeState)
 
   const [invalidIP, setInvalidIP] = useState(false)
@@ -76,20 +71,11 @@ export default function Settings() {
 
   const { pushMessage } = useToast()
 
-  const baseURL$ = useMemo(() => new Subject<string>(), [])
+  const argsBuilder = useMemo(() => new CliArguments().fromString(cliArgs), [])
+
   const serverAddr$ = useMemo(() => new Subject<string>(), [])
   const serverPort$ = useMemo(() => new Subject<string>(), [])
 
-  useEffect(() => {
-    const sub = baseURL$
-      .pipe(debounceTime(500))
-      .subscribe(baseURL => {
-        setBaseURL(baseURL)
-        pushMessage(i18n.t('restartAppMessage'), 'info')
-      })
-    return () => sub.unsubscribe()
-  }, [])
-
   useEffect(() => {
     const sub = serverAddr$
       .pipe(
@@ -144,223 +130,196 @@ export default function Settings() {
    * Updates yt-dlp binary via RPC
    */
   const updateBinary = () => {
-    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated'), 'success'))
+    client.updateExecutable().then(() => pushMessage(i18n.t('toastUpdated')))
   }
 
   return (
-    <Container maxWidth="xl" sx={{ mt: 4, mb: 8 }}>
-      <Paper
-        sx={{
-          p: 2.5,
-          display: 'flex',
-          flexDirection: 'column',
-          minHeight: 240,
-        }}
-      >
-        <Typography pb={2} variant="h6" color="primary">
-          {i18n.t('settingsAnchor')}
-        </Typography>
-        <Grid container spacing={2}>
-          <Grid item xs={12} md={11}>
-            <TextField
-              fullWidth
-              label={i18n.t('serverAddressTitle')}
-              defaultValue={serverAddr}
-              error={invalidIP}
-              onChange={(e) => serverAddr$.next(e.currentTarget.value)}
-              InputProps={{
-                startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
-              }}
-            />
-          </Grid>
-          <Grid item xs={12} md={1}>
-            <TextField
-              disabled={reverseProxy}
-              fullWidth
-              label={i18n.t('serverPortTitle')}
-              defaultValue={serverPort}
-              onChange={(e) => serverPort$.next(e.currentTarget.value)}
-              error={isNaN(Number(serverPort)) || Number(serverPort) > 65535}
-            />
-          </Grid>
-          <Grid item xs={12} md={12}>
-            <TextField
-              disabled={reverseProxy}
-              fullWidth
-              label={i18n.t('appTitle')}
-              defaultValue={appTitle}
-              onChange={(e) => setApptitle(e.currentTarget.value)}
-              error={appTitle === ''}
-            />
-          </Grid>
-          <Grid item xs={12} md={12}>
-            <Typography>
-              {i18n.t('rpcPollingTimeTitle')}
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+      <Grid container spacing={3}>
+        <Grid item xs={12} md={12} lg={12}>
+          <Paper
+            sx={{
+              p: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              minHeight: 240,
+            }}
+          >
+            <Typography pb={3} variant="h5" color="primary">
+              {i18n.t('settingsAnchor')}
             </Typography>
-            <Typography variant='caption' sx={{ mb: 0.5 }}>
-              {i18n.t('rpcPollingTimeDescription')}
-            </Typography>
-            <Slider
-              aria-label="rpc polling time"
-              defaultValue={pollingTime}
-              max={2000}
-              getAriaValueText={(v: number) => `${v} ms`}
-              step={null}
-              valueLabelDisplay="off"
-              marks={[
-                { value: 100, label: '100 ms' },
-                { value: 250, label: '250 ms' },
-                { value: 500, label: '500 ms' },
-                { value: 750, label: '750 ms' },
-                { value: 1000, label: '1000 ms' },
-                { value: 2000, label: '2000 ms' },
-              ]}
-              onChange={(_, value) => typeof value === 'number'
-                ? setPollingTime(value)
-                : setPollingTime(1000)
-              }
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <Typography variant="h6" color="primary" sx={{ mb: 0.5 }}>
-              Reverse Proxy
-            </Typography>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  defaultChecked={reverseProxy}
-                  onChange={() => setReverseProxy(state => !state)}
-                />
-              }
-              label={i18n.t('servedFromReverseProxyCheckbox')}
-              sx={{ mb: 1 }}
-            />
-            <TextField
-              fullWidth
-              label={i18n.t('urlBase')}
-              defaultValue={baseURL}
-              onChange={(e) => {
-                let value = e.currentTarget.value
-                if (value.startsWith('/')) {
-                  value = value.substring(1)
+            <FormGroup>
+              <Grid container spacing={2}>
+                <Grid item xs={12} md={11}>
+                  <TextField
+                    fullWidth
+                    label={i18n.t('serverAddressTitle')}
+                    defaultValue={serverAddr}
+                    error={invalidIP}
+                    onChange={(e) => serverAddr$.next(e.currentTarget.value)}
+                    InputProps={{
+                      startAdornment: <InputAdornment position="start">ws://</InputAdornment>,
+                    }}
+                  />
+                </Grid>
+                <Grid item xs={12} md={1}>
+                  <TextField
+                    disabled={reverseProxy}
+                    fullWidth
+                    label={i18n.t('serverPortTitle')}
+                    defaultValue={serverPort}
+                    onChange={(e) => serverPort$.next(e.currentTarget.value)}
+                    error={isNaN(Number(serverPort)) || Number(serverPort) > 65535}
+                  />
+                </Grid>
+                <Grid item xs={12} md={12}>
+                  <TextField
+                    disabled={reverseProxy}
+                    fullWidth
+                    label={i18n.t('appTitle')}
+                    defaultValue={appTitle}
+                    onChange={(e) => setApptitle(e.currentTarget.value)}
+                    error={appTitle === ''}
+                  />
+                </Grid>
+                <Grid item xs={12}>
+                  <FormControlLabel
+                    control={
+                      <Checkbox
+                        defaultChecked={reverseProxy}
+                        onChange={() => setReverseProxy(state => !state)}
+                      />
+                    }
+                    label={i18n.t('servedFromReverseProxyCheckbox')}
+                    sx={{ mb: 2 }}
+                  />
+                </Grid>
+              </Grid>
+              <Grid container spacing={2}>
+                <Grid item xs={12} md={6}>
+                  <FormControl fullWidth>
+                    <InputLabel>{i18n.t('languageSelect')}</InputLabel>
+                    <Select
+                      defaultValue={language}
+                      label={i18n.t('languageSelect')}
+                      onChange={handleLanguageChange}
+                    >
+                      {languages.map(l => (
+                        <MenuItem value={l} key={l}>
+                          {capitalize(l)}
+                        </MenuItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                </Grid>
+                <Grid item xs={12} md={6}>
+                  <FormControl fullWidth>
+                    <InputLabel>{i18n.t('themeSelect')}</InputLabel>
+                    <Select
+                      defaultValue={theme}
+                      label={i18n.t('themeSelect')}
+                      onChange={handleThemeChange}
+                    >
+                      <MenuItem value="light">Light</MenuItem>
+                      <MenuItem value="dark">Dark</MenuItem>
+                      <MenuItem value="system">System</MenuItem>
+                    </Select>
+                  </FormControl>
+                </Grid>
+              </Grid>
+              <FormControlLabel
+                control={
+                  <Switch
+                    defaultChecked={argsBuilder.noMTime}
+                    onChange={() => setCliArgs(argsBuilder.toggleNoMTime().toString())}
+                  />
                 }
-                if (value.endsWith('/')) {
-                  value = value.substring(0, value.length - 1)
+                label={i18n.t('noMTimeCheckbox')}
+                sx={{ mt: 3 }}
+              />
+              <FormControlLabel
+                control={
+                  <Switch
+                    defaultChecked={argsBuilder.extractAudio}
+                    onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                    disabled={formatSelection}
+                  />
                 }
-                baseURL$.next(value)
-              }}
-              sx={{ mb: 2 }}
-            />
-          </Grid>
+                label={i18n.t('extractAudioCheckbox')}
+              />
+              <FormControlLabel
+                control={
+                  <Switch
+                    defaultChecked={formatSelection}
+                    onChange={() => {
+                      setCliArgs(argsBuilder.disableExtractAudio().toString())
+                      setFormatSelection(!formatSelection)
+                    }}
+                  />
+                }
+                label={i18n.t('formatSelectionEnabler')}
+              />
+              <Grid>
+                <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
+                  {i18n.t('overridesAnchor')}
+                </Typography>
+                <Stack direction="column">
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        defaultChecked={!!pathOverriding}
+                        onChange={() => {
+                          setPathOverriding(state => !state)
+                        }}
+                      />
+                    }
+                    label={i18n.t('pathOverrideOption')}
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        defaultChecked={fileRenaming}
+                        onChange={() => {
+                          setFileRenaming(state => !state)
+                        }}
+                      />
+                    }
+                    label={i18n.t('filenameOverrideOption')}
+                  />
+                  <FormControlLabel
+                    control={
+                      <Switch
+                        defaultChecked={enableArgs}
+                        onChange={() => {
+                          setEnableArgs(state => !state)
+                        }}
+                      />
+                    }
+                    label={i18n.t('customArgs')}
+                  />
+                </Stack>
+              </Grid>
+              <Grid sx={{ mr: 1, mt: 3 }}>
+                <Typography variant="h6" color="primary" sx={{ mb: 2 }}>
+                  Cookies
+                </Typography>
+                <CookiesTextField />
+              </Grid>
+              <Grid>
+                <Stack direction="row">
+                  <Button
+                    sx={{ mr: 1, mt: 3 }}
+                    variant="contained"
+                    onClick={() => updateBinary()}
+                  >
+                    {i18n.t('updateBinButton')}
+                  </Button>
+                </Stack>
+              </Grid>
+            </FormGroup>
+          </Paper>
         </Grid>
-        <Typography variant="h6" color="primary" sx={{ mt: 0.5, mb: 2 }}>
-          Appaerance
-        </Typography>
-        <Grid container spacing={2}>
-          <Grid item xs={12} md={6}>
-            <FormControl fullWidth>
-              <InputLabel>{i18n.t('languageSelect')}</InputLabel>
-              <Select
-                defaultValue={language}
-                label={i18n.t('languageSelect')}
-                onChange={handleLanguageChange}
-              >
-                {languages.toSorted((a, b) => a.localeCompare(b)).map(l => (
-                  <MenuItem value={l} key={l}>
-                    {capitalize(l)}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <FormControl fullWidth>
-              <InputLabel>{i18n.t('themeSelect')}</InputLabel>
-              <Select
-                defaultValue={theme}
-                label={i18n.t('themeSelect')}
-                onChange={handleThemeChange}
-              >
-                <MenuItem value="light">Light</MenuItem>
-                <MenuItem value="dark">Dark</MenuItem>
-                <MenuItem value="system">System</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-        </Grid>
-        <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
-          General download settings
-        </Typography>
-
-        <FormControlLabel
-          control={
-            <Switch
-              defaultChecked={formatSelection}
-              onChange={() => {
-                setFormatSelection(!formatSelection)
-              }}
-            />
-          }
-          label={i18n.t('formatSelectionEnabler')}
-        />
-        <Grid>
-          <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
-            {i18n.t('overridesAnchor')}
-          </Typography>
-          <Stack direction="column">
-            <FormControlLabel
-              control={
-                <Switch
-                  defaultChecked={!!pathOverriding}
-                  onChange={() => {
-                    setPathOverriding(state => !state)
-                  }}
-                />
-              }
-              label={i18n.t('pathOverrideOption')}
-            />
-            <FormControlLabel
-              control={
-                <Switch
-                  defaultChecked={fileRenaming}
-                  onChange={() => {
-                    setFileRenaming(state => !state)
-                  }}
-                />
-              }
-              label={i18n.t('filenameOverrideOption')}
-            />
-            <FormControlLabel
-              control={
-                <Switch
-                  defaultChecked={enableArgs}
-                  onChange={() => {
-                    setEnableArgs(state => !state)
-                  }}
-                />
-              }
-              label={i18n.t('customArgs')}
-            />
-          </Stack>
-        </Grid>
-        <Grid sx={{ mr: 1, mt: 2 }}>
-          <Typography variant="h6" color="primary" sx={{ mb: 2 }}>
-            Cookies
-          </Typography>
-          <CookiesTextField />
-        </Grid>
-        <Grid>
-          <Stack direction="row">
-            <Button
-              sx={{ mr: 1, mt: 3 }}
-              variant="contained"
-              onClick={() => updateBinary()}
-            >
-              {i18n.t('updateBinButton')}
-            </Button>
-          </Stack>
-        </Grid>
-      </Paper>
+      </Grid>
     </Container>
   )
 }

frontend/src/views/Terminal.tsx

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

go.mod

@@ -1,39 +1,43 @@
 module github.com/marcopeocchi/yt-dlp-web-ui
 
-go 1.22
+go 1.20
 
 require (
-	github.com/asaskevich/EventBus v0.0.0-20200907212545-49d423059eef
-	github.com/go-chi/chi/v5 v5.0.12
+	github.com/go-chi/chi/v5 v5.0.11
 	github.com/go-chi/cors v1.2.1
-	github.com/golang-jwt/jwt/v5 v5.2.1
-	github.com/google/uuid v1.6.0
+	github.com/golang-jwt/jwt/v5 v5.2.0
+	github.com/google/uuid v1.5.0
 	github.com/gorilla/websocket v1.5.1
+	github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa
 	github.com/reactivex/rxgo/v2 v2.5.0
-	golang.org/x/sync v0.6.0
-	golang.org/x/sys v0.18.0
+	golang.org/x/sys v0.15.0
 	gopkg.in/yaml.v3 v3.0.1
-	modernc.org/sqlite v1.29.5
+	modernc.org/sqlite v1.28.0
 )
 
 require (
-	github.com/cenkalti/backoff/v4 v4.2.1 // indirect
-	github.com/davecgh/go-spew v1.1.1 // indirect
+	github.com/cenkalti/backoff/v4 v4.0.0 // indirect
+	github.com/davecgh/go-spew v1.1.0 // indirect
 	github.com/dustin/go-humanize v1.0.1 // indirect
-	github.com/emirpasic/gods v1.18.1 // indirect
-	github.com/hashicorp/golang-lru/v2 v2.0.7 // indirect
+	github.com/emirpasic/gods v1.12.0 // indirect
+	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
-	github.com/ncruces/go-strftime v0.1.9 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/stretchr/objx v0.5.2 // indirect
-	github.com/stretchr/testify v1.9.0 // indirect
-	github.com/teivah/onecontext v1.3.0 // indirect
-	golang.org/x/net v0.22.0 // indirect
-	modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b // indirect
-	modernc.org/libc v1.47.0 // indirect
+	github.com/stretchr/objx v0.1.0 // indirect
+	github.com/stretchr/testify v1.4.0 // indirect
+	github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775 // indirect
+	golang.org/x/mod v0.14.0 // indirect
+	golang.org/x/net v0.19.0 // indirect
+	golang.org/x/tools v0.16.1 // indirect
+	gopkg.in/yaml.v2 v2.2.2 // indirect
+	lukechampine.com/uint128 v1.3.0 // indirect
+	modernc.org/cc/v3 v3.41.0 // indirect
+	modernc.org/ccgo/v3 v3.16.15 // indirect
+	modernc.org/libc v1.38.0 // indirect
 	modernc.org/mathutil v1.6.0 // indirect
 	modernc.org/memory v1.7.2 // indirect
+	modernc.org/opt v0.1.3 // indirect
 	modernc.org/strutil v1.2.0 // indirect
 	modernc.org/token v1.1.0 // indirect
 )

go.sum

@@ -1,111 +1,100 @@
-github.com/asaskevich/EventBus v0.0.0-20200907212545-49d423059eef h1:2JGTg6JapxP9/R33ZaagQtAM4EkkSYnIAlOG5EI8gkM=
-github.com/asaskevich/EventBus v0.0.0-20200907212545-49d423059eef/go.mod h1:JS7hed4L1fj0hXcyEejnW57/7LCetXggd+vwrRnYeII=
+github.com/cenkalti/backoff/v4 v4.0.0 h1:6VeaLF9aI+MAUQ95106HwWzYZgJJpZ4stumjj6RFYAU=
 github.com/cenkalti/backoff/v4 v4.0.0/go.mod h1:eEew/i+1Q6OrCDZh3WiXYv3+nJwBASZ8Bog/87DQnVg=
-github.com/cenkalti/backoff/v4 v4.2.1 h1:y4OZtCnogmCPw98Zjyt5a6+QwPLGkiQsYW5oUqylYbM=
-github.com/cenkalti/backoff/v4 v4.2.1/go.mod h1:Y3VNntkOUPxTVeUxJ/G5vcM//AlwfmyYozVcomhLiZE=
+github.com/davecgh/go-spew v1.1.0 h1:ZDRjVQ15GmhC3fiQ8ni8+OwkZQO4DARzQgrnXU1Liz8=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
-github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
-github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/emirpasic/gods v1.12.0 h1:QAUIPSaCu4G+POclxeqb3F+WPpdKqFGlw36+yOzGlrg=
 github.com/emirpasic/gods v1.12.0/go.mod h1:YfzfFFoVP/catgzJb4IKIqXjX78Ha8FMSDh3ymbK86o=
-github.com/emirpasic/gods v1.18.1 h1:FXtiHYKDGKCW2KzwZKx0iC0PQmdlorYgdFG9jPXJ1Bc=
-github.com/emirpasic/gods v1.18.1/go.mod h1:8tpGGwCnJ5H4r6BWwaV6OrWmMoPhUl5jm/FMNAnJvWQ=
-github.com/go-chi/chi/v5 v5.0.12 h1:9euLV5sTrTNTRUU9POmDUvfxyj6LAABLUcEWO+JJb4s=
-github.com/go-chi/chi/v5 v5.0.12/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/go-chi/chi/v5 v5.0.11 h1:BnpYbFZ3T3S1WMpD79r7R5ThWX40TaFB7L31Y8xqSwA=
+github.com/go-chi/chi/v5 v5.0.11/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
 github.com/go-chi/cors v1.2.1 h1:xEC8UT3Rlp2QuWNEr4Fs/c2EAGVKBwy/1vHx3bppil4=
 github.com/go-chi/cors v1.2.1/go.mod h1:sSbTewc+6wYHBBCW7ytsFSn836hqM7JxpglAy2Vzc58=
-github.com/golang-jwt/jwt/v5 v5.2.1 h1:OuVbFODueb089Lh128TAcimifWaLhJwVflnrgM17wHk=
-github.com/golang-jwt/jwt/v5 v5.2.1/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/golang-jwt/jwt/v5 v5.2.0 h1:d/ix8ftRUorsN+5eMIlF4T6J8CAt9rch3My2winC1Jw=
+github.com/golang-jwt/jwt/v5 v5.2.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
+github.com/google/go-cmp v0.5.9 h1:O2Tfq5qg4qc4AmwVlvv0oLiVAGB7enBSJ2x2DqQFi38=
 github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26 h1:Xim43kblpZXfIBQsbuBVKCudVG457BR2GZFIz3uw3hQ=
-github.com/google/pprof v0.0.0-20221118152302-e6195bd50e26/go.mod h1:dDKJzRmX4S37WGHujM7tX//fmj1uioxKzKxz3lo4HJo=
-github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
-github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/google/uuid v1.5.0 h1:1p67kYwdtXjb0gL0BPiP1Av9wiZPo5A8z2cWkTZ+eyU=
+github.com/google/uuid v1.5.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/gorilla/websocket v1.5.1 h1:gmztn0JnHVt9JZquRuzLw3g4wouNVzKL15iLr/zn/QY=
 github.com/gorilla/websocket v1.5.1/go.mod h1:x3kM2JMyaluk02fnUJpQuwD2dCS5NDG2ZHL0uE0tcaY=
-github.com/hashicorp/golang-lru/v2 v2.0.7 h1:a+bsQ5rvGLjzHuww6tVxozPZFVghXaHOwFs4luLUK2k=
-github.com/hashicorp/golang-lru/v2 v2.0.7/go.mod h1:QeFd9opnmA6QUJc5vARoKUSoFhyfM2/ZepoAG6RGpeM=
+github.com/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/kr/pretty v0.1.0 h1:L/CwN0zerZDmRFUapSPitk6f+Q3+0za1rQkzVuMiMFI=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pty v1.1.1/go.mod h1:pFQYn66WHrOpPYNljwOMqo10TkYh1fy3cYio2l3bCsQ=
 github.com/kr/text v0.1.0 h1:45sCR5RtlFHMR4UwH9sdQ5TC8v0qDQCHnXt+kaKSTVE=
 github.com/kr/text v0.1.0/go.mod h1:4Jbv+DJW3UT/LiOwJeYQe1efqtUx/iVham/4vfdArNI=
+github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa h1:uaAQLGhN4SesB9inOQ1Q6EH+BwTWHQOvwhR0TIJvnYc=
+github.com/marcopeocchi/fazzoletti v0.0.0-20230308161120-c545580f79fa/go.mod h1:RvfVo/6Sbnfra9kkvIxDW8NYOOaYsHjF0DdtMCs9cdo=
 github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
 github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
-github.com/mattn/go-sqlite3 v1.14.22 h1:2gZY6PC6kBnID23Tichd1K+Z0oS6nE/XwU+Vz/5o4kU=
-github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
-github.com/ncruces/go-strftime v0.1.9 h1:bY0MQC28UADQmHmaF5dgpLmImcShSi2kHU9XLdhx/f4=
-github.com/ncruces/go-strftime v0.1.9/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/mattn/go-sqlite3 v1.14.16 h1:yOQRA0RpS5PFz/oikGwBEqvAWhWg5ufRz4ETLjwpU1Y=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/reactivex/rxgo/v2 v2.5.0 h1:FhPgHwX9vKdNQB2gq9EPt+EKk9QrrzoeztGbEEnZam4=
 github.com/reactivex/rxgo/v2 v2.5.0/go.mod h1:bs4fVZxcb5ZckLIOeIeVH942yunJLWDABWGbrHAW+qU=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/stretchr/objx v0.1.0 h1:4G4v2dO3VZwixGIRoQ5Lfboy6nUhCyYzaqnIAPPhYs4=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
-github.com/stretchr/objx v0.5.2 h1:xuMeJ0Sdp5ZMRXx/aWO6RZxdr3beISkG5/G/aIRr3pY=
-github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
 github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.4.0 h1:2E4SXV/wtOkTonXsotYi4li6zVWxYlZuYNCXe9XRJyk=
 github.com/stretchr/testify v1.4.0/go.mod h1:j7eGeouHqKxXV5pUuKE4zz7dFj8WfuZ+81PSLYec5m4=
-github.com/stretchr/testify v1.9.0 h1:HtqpIVDClZ4nwg75+f6Lvsy/wHu+3BoSGCbBAcpTsTg=
-github.com/stretchr/testify v1.9.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775 h1:BLNsFR8l/hj/oGjnJXkd4Vi3s4kQD3/3x8HSAE4bzN0=
 github.com/teivah/onecontext v0.0.0-20200513185103-40f981bfd775/go.mod h1:XUZ4x3oGhWfiOnUvTslnKKs39AWUct3g3yJvXTQSJOQ=
-github.com/teivah/onecontext v1.3.0 h1:tbikMhAlo6VhAuEGCvhc8HlTnpX4xTNPTOseWuhO1J0=
-github.com/teivah/onecontext v1.3.0/go.mod h1:hoW1nmdPVK/0jrvGtcx8sCKYs2PiS4z0zzfdeuEVyb0=
 go.uber.org/goleak v1.1.10 h1:z+mqJhf6ss6BSfSM671tgKyZBFPTTJM+HLxnhPC3wu0=
 go.uber.org/goleak v1.1.10/go.mod h1:8a7PlsEVH3e/a/GLqe5IIrQx6GzcnRmZEufDUTk4A7A=
 golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACkg1iLfiJU5Ep61QUkGW8qpdssI0+w=
 golang.org/x/lint v0.0.0-20190930215403-16217165b5de h1:5hukYrvBGR8/eNkX5mdUezrA6JiaEZDtJb9Ei+1LlBs=
 golang.org/x/lint v0.0.0-20190930215403-16217165b5de/go.mod h1:6SW0HCj/g11FgYtHlgUYUwCkIfeOF89ocIRzGO/8vkc=
-golang.org/x/mod v0.16.0 h1:QX4fJ0Rr5cPQCF7O9lh9Se4pmwfwskqZfq5moyldzic=
-golang.org/x/mod v0.16.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
+golang.org/x/mod v0.14.0 h1:dGoOF9QVLYng8IHTm7BAyWqCqSheQ5pYWGhzW00YJr0=
+golang.org/x/mod v0.14.0/go.mod h1:hTbmBsO62+eylJbnUtE2MGJUyE7QWk4xUqPFrRgJ+7c=
 golang.org/x/net v0.0.0-20190311183353-d8887717615a/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
-golang.org/x/net v0.22.0 h1:9sGLhx7iRIHEiX0oAJ3MRZMUCElJgy7Br1nO+AMN3Tc=
-golang.org/x/net v0.22.0/go.mod h1:JKghWKKOSdJwpW2GEx0Ja7fmaKnMsbu+MWVZTokSYmg=
+golang.org/x/net v0.19.0 h1:zTwKpTd2XuCqf8huc7Fo2iSy+4RHPd10s4KzeTnVr1c=
+golang.org/x/net v0.19.0/go.mod h1:CfAk/cbD4CthTvqiEl8NpboMuiuOYsAr/7NOjZJtv1U=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20190911185100-cd5d95a43a6e/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
-golang.org/x/sync v0.6.0 h1:5BMeUDZ7vkXGfEr1x9B4bRcTH4lpkTkpdh0T/J+qjbQ=
-golang.org/x/sync v0.6.0/go.mod h1:Czt+wKu1gCyEFDUtn0jG5QVvpJ6rzVqr5aXyt9drQfk=
+golang.org/x/sync v0.5.0 h1:60k92dhOjHxJkrqnwsfl8KuaHbn/5dl0lUPUklKo3qE=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.18.0 h1:DBdB3niSjOA/O0blCZBqDefyWNYveAYMNF1Wum0DYQ4=
-golang.org/x/sys v0.18.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/sys v0.15.0 h1:h48lPFYpsTvQJZF4EKyI4aLHaev3CxivZmv7yZig9pc=
+golang.org/x/sys v0.15.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
 golang.org/x/tools v0.0.0-20190311212946-11955173bddd/go.mod h1:LCzVGOaR6xXOjkQ3onu1FJEFr0SW1gC7cKk1uF8kGRs=
 golang.org/x/tools v0.0.0-20191108193012-7d206e10da11/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.19.0 h1:tfGCXNR1OsFG+sVdLAitlpjAvD/I6dHDKnYrpEZUHkw=
-golang.org/x/tools v0.19.0/go.mod h1:qoJWxmGSIBmAeriMx19ogtrEPrGtDbPK634QFIcLAhc=
+golang.org/x/tools v0.16.1 h1:TLyB3WofjdOEepBHAU20JdNC1Zbg87elYofWYAY5oZA=
+golang.org/x/tools v0.16.1/go.mod h1:kYVVN6I1mBNoB1OX+noeBjbRk4IUEPa7JJ+TJMEooJ0=
 golang.org/x/xerrors v0.0.0-20190717185122-a985d3407aa7/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127 h1:qIbj1fsPNlZgppZ+VLlY7N33q108Sa+fhmuc+sWQYwY=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.2.2 h1:ZCJp+EgiOT7lHqUV2J862kp8Qj64Jo6az82+3Td9dZw=
 gopkg.in/yaml.v2 v2.2.2/go.mod h1:hI93XBmqTisBFMUTm0b8Fm+jr3Dg1NNxqwp+5A1VGuI=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-modernc.org/cc/v4 v4.19.5 h1:QlsZyQ1zf78DGeqnQ9ILi9hXyMdoC5e1qoGNUyBjHQw=
-modernc.org/cc/v4 v4.19.5/go.mod h1:HM7VJTZbUCR3rV8EYBi9wxnJ0ZBRiGE5OeGXNA0IsLQ=
-modernc.org/ccgo/v4 v4.13.0 h1:99E8QHRoPrXN8VpS0zgAgJ5nSjpXrPKpsJIMvGL/2Oc=
-modernc.org/ccgo/v4 v4.13.0/go.mod h1:Td6RI9W9G2ZpKHaJ7UeGEiB2aIpoDqLBnm4wtkbJTbQ=
-modernc.org/fileutil v1.3.0 h1:gQ5SIzK3H9kdfai/5x41oQiKValumqNTDXMvKo62HvE=
-modernc.org/fileutil v1.3.0/go.mod h1:XatxS8fZi3pS8/hKG2GH/ArUogfxjpEKs3Ku3aK4JyQ=
-modernc.org/gc/v2 v2.4.1 h1:9cNzOqPyMJBvrUipmynX0ZohMhcxPtMccYgGOJdOiBw=
-modernc.org/gc/v2 v2.4.1/go.mod h1:wzN5dK1AzVGoH6XOzc3YZ+ey/jPgYHLuVckd62P0GYU=
-modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b h1:BnN1t+pb1cy61zbvSUV7SeI0PwosMhlAEi/vBY4qxp8=
-modernc.org/gc/v3 v3.0.0-20240304020402-f0dba7c97c2b/go.mod h1:Qz0X07sNOR1jWYCrJMEnbW/X55x206Q7Vt4mz6/wHp4=
-modernc.org/libc v1.47.0 h1:BXrzId9fOOkBtS+uFQ5aZyVGmt7WcSEPrXF5Kwsho90=
-modernc.org/libc v1.47.0/go.mod h1:gzCncw0a74aCiVqHeWAYHHaW//fkSHHS/3S/gfhLlCI=
+lukechampine.com/uint128 v1.3.0 h1:cDdUVfRwDUDovz610ABgFD17nXD4/uDgVHl2sC3+sbo=
+lukechampine.com/uint128 v1.3.0/go.mod h1:c4eWIwlEGaxC/+H1VguhU4PHXNWDCDMUlWdIWl2j1gk=
+modernc.org/cc/v3 v3.41.0 h1:QoR1Sn3YWlmA1T4vLaKZfawdVtSiGx8H+cEojbC7v1Q=
+modernc.org/cc/v3 v3.41.0/go.mod h1:Ni4zjJYJ04CDOhG7dn640WGfwBzfE0ecX8TyMB0Fv0Y=
+modernc.org/ccgo/v3 v3.16.15 h1:KbDR3ZAVU+wiLyMESPtbtE/Add4elztFyfsWoNTgxS0=
+modernc.org/ccgo/v3 v3.16.15/go.mod h1:yT7B+/E2m43tmMOT51GMoM98/MtHIcQQSleGnddkUNI=
+modernc.org/ccorpus v1.11.6 h1:J16RXiiqiCgua6+ZvQot4yUuUy8zxgqbqEEUuGPlISk=
+modernc.org/httpfs v1.0.6 h1:AAgIpFZRXuYnkjftxTAZwMIiwEqAfk8aVB2/oA6nAeM=
+modernc.org/libc v1.38.0 h1:o4Lpk0zNDSdsjfEXnF1FGXWQ9PDi1NOdWcLP5n13FGo=
+modernc.org/libc v1.38.0/go.mod h1:YAXkAZ8ktnkCKaN9sw/UDeUVkGYJ/YquGO4FTi5nmHE=
 modernc.org/mathutil v1.6.0 h1:fRe9+AmYlaej+64JsEEhoWuAYBkOtQiMEU7n/XgfYi4=
 modernc.org/mathutil v1.6.0/go.mod h1:Ui5Q9q1TR2gFm0AQRqQUaBWFLAhQpCwNcuhBOSedWPo=
 modernc.org/memory v1.7.2 h1:Klh90S215mmH8c9gO98QxQFsY+W451E8AnzjoE2ee1E=
 modernc.org/memory v1.7.2/go.mod h1:NO4NVCQy0N7ln+T9ngWqOQfi7ley4vpwvARR+Hjw95E=
 modernc.org/opt v0.1.3 h1:3XOZf2yznlhC+ibLltsDGzABUGVx8J6pnFMS3E4dcq4=
 modernc.org/opt v0.1.3/go.mod h1:WdSiB5evDcignE70guQKxYUl14mgWtbClRi5wmkkTX0=
-modernc.org/sortutil v1.2.0 h1:jQiD3PfS2REGJNzNCMMaLSp/wdMNieTbKX920Cqdgqc=
-modernc.org/sortutil v1.2.0/go.mod h1:TKU2s7kJMf1AE84OoiGppNHJwvB753OYfNl2WRb++Ss=
-modernc.org/sqlite v1.29.5 h1:8l/SQKAjDtZFo9lkJLdk8g9JEOeYRG4/ghStDCCTiTE=
-modernc.org/sqlite v1.29.5/go.mod h1:S02dvcmm7TnTRvGhv8IGYyLnIt7AS2KPaB1F/71p75U=
+modernc.org/sqlite v1.28.0 h1:Zx+LyDDmXczNnEQdvPuEfcFVA2ZPyaD7UCZDjef3BHQ=
+modernc.org/sqlite v1.28.0/go.mod h1:Qxpazz0zH8Z1xCFyi5GSL3FzbtZ3fvbjmywNogldEW0=
 modernc.org/strutil v1.2.0 h1:agBi9dp1I+eOnxXeiZawM8F4LawKv4NzGWSaLfyeNZA=
 modernc.org/strutil v1.2.0/go.mod h1:/mdcBmfOibveCTBxUl5B5l6W+TTH1FXPLHZE6bTosX0=
+modernc.org/tcl v1.15.2 h1:C4ybAYCGJw968e+Me18oW55kD/FexcHbqH2xak1ROSY=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
 modernc.org/token v1.1.0/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
+modernc.org/z v1.7.3 h1:zDJf6iHjrnB+WRD88stbXokugjyc0/pB91ri1gO6LZY=

main.go

@@ -30,21 +30,16 @@ var (
 	userFromEnv = os.Getenv("USERNAME")
 	passFromEnv = os.Getenv("PASSWORD")
 
-	logFile           string
-	enableFileLogging bool
-
 	//go:embed frontend/dist/index.html
 	//go:embed frontend/dist/assets/*
 	frontend embed.FS
-
-	//go:embed openapi/*
-	swagger embed.FS
 )
 
 func init() {
+
 	flag.StringVar(&host, "host", "0.0.0.0", "Host where server will listen at")
 	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
-	flag.IntVar(&queueSize, "qs", 2, "Queue size (concurrent downloads)")
+	flag.IntVar(&queueSize, "qs", runtime.NumCPU(), "Download queue size")
 
 	flag.StringVar(&configFile, "conf", "./config.yml", "Config file path")
 	flag.StringVar(&downloadPath, "out", ".", "Where files will be saved")
@@ -52,9 +47,6 @@ func init() {
 	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
 	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")
 
-	flag.BoolVar(&enableFileLogging, "fl", false, "enable outputting logs to a file")
-	flag.StringVar(&logFile, "lf", "yt-dlp-webui.log", "set log file location")
-
 	flag.BoolVar(&requireAuth, "auth", false, "Enable RPC authentication")
 	flag.StringVar(&username, "user", userFromEnv, "Username required for auth")
 	flag.StringVar(&password, "pass", passFromEnv, "Password required for auth")
@@ -64,6 +56,7 @@ func init() {
 
 func main() {
 	frontend, err := fs.Sub(frontend, "frontend/dist")
+
 	if err != nil {
 		log.Fatalln(err)
 	}
@@ -81,23 +74,10 @@ func main() {
 	c.Username = username
 	c.Password = password
 
-	// limit concurrent downloads for systems with 2 or less logical cores
-	if runtime.NumCPU() <= 2 {
-		c.QueueSize = 1
-	}
-
 	// if config file is found it will be merged with the current config struct
 	if err := c.LoadFile(configFile); err != nil {
 		log.Println(cli.BgRed, "config", cli.Reset, err)
 	}
 
-	server.RunBlocking(&server.RunConfig{
-		Host:        c.Host,
-		Port:        c.Port,
-		DBPath:      localDatabasePath,
-		FileLogging: enableFileLogging,
-		LogFile:     logFile,
-		App:         frontend,
-		Swagger:     swagger,
-	})
+	server.RunBlocking(c.Host, c.Port, frontend, localDatabasePath)
 }

openapi/index.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="SwaggerUI" />
-  <title>SwaggerUI</title>
-  <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5.17.2/swagger-ui.css" />
-</head>
-
-<body>
-  <div id="swagger-ui"></div>
-  <script src="https://unpkg.com/swagger-ui-dist@5.17.2/swagger-ui-bundle.js" crossorigin></script>
-  <script>
-    window.onload = () => {
-      window.ui = SwaggerUIBundle({
-        url: './openapi.json',
-        dom_id: '#swagger-ui',
-      });
-    };
-  </script>
-</body>
-
-</html>

openapi/openapi.json

@@ -1,273 +0,0 @@
-{
-  "openapi": "3.1.0",
-  "info": {
-    "title": "Swagger yt-dlp-webui - OpenAPI 3.1",
-    "description": "yt-dlp-webui api based on the OpenAPI 3.1 specification.  You can find out more about\nSwagger at [https://swagger.io](https://swagger.io). \n\nSome useful links:\n- [yt-dlp-webui repository](https://github.com/marcopeocchi/yt-dlp-web-ui)",
-    "termsOfService": "http://swagger.io/terms/",
-    "contact": {
-      "email": "apiteam@swagger.io"
-    },
-    "license": {
-      "name": "Apache 2.0",
-      "url": "http://www.apache.org/licenses/LICENSE-2.0.html"
-    },
-    "version": "1.0.11"
-  },
-  "externalDocs": {
-    "description": "Find out more about Swagger",
-    "url": "http://swagger.io"
-  },
-  "servers": [
-    {
-      "url": "/api/v1"
-    }
-  ],
-  "tags": [
-    {
-      "name": "download",
-      "description": "Everything about your Pets",
-      "externalDocs": {
-        "description": "Find out more",
-        "url": "https://github.com/marcopeocchi/yt-dlp-web-ui"
-      }
-    }
-  ],
-  "paths": {
-    "/exec": {
-      "post": {
-        "tags": [
-          "download"
-        ],
-        "summary": "Add a new download in the pending state ready to be processed",
-        "description": "Add a new download in the pending state ready to be processed",
-        "operationId": "addDownload",
-        "requestBody": {
-          "description": "Create a new download",
-          "content": {
-            "application/json": {
-              "schema": {
-                "$ref": "#/components/schemas/DownloadRequest"
-              }
-            }
-          },
-          "required": true
-        },
-        "responses": {
-          "200": {
-            "description": "Successful operation",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "type": "string",
-                  "description": "Process uuid"
-                }
-              }
-            }
-          },
-          "400": {
-            "description": "Invalid input"
-          },
-          "422": {
-            "description": "Validation exception"
-          }
-        },
-        "security": [
-          {
-            "api_key": [
-              "write:download",
-              "read:download"
-            ]
-          }
-        ]
-      }
-    },
-    "/running": {
-      "get": {
-        "tags": [
-          "download"
-        ],
-        "summary": "Returns all running and pending process",
-        "description": "Returns all running and pending process",
-        "operationId": "running",
-        "responses": {
-          "200": {
-            "description": "Successful operation",
-            "content": {
-              "application/json": {
-                "schema": {
-                  "$ref": "#/components/schemas/ProcessResponse"
-                }
-              }
-            }
-          },
-          "400": {
-            "description": "Invalid input"
-          },
-          "422": {
-            "description": "Validation exception"
-          }
-        },
-        "security": [
-          {
-            "api_key": [
-              "write:download",
-              "read:download"
-            ]
-          }
-        ]
-      }
-    }
-  },
-  "components": {
-    "schemas": {
-      "DownloadRequest": {
-        "type": "object",
-        "properties": {
-          "url": {
-            "type": "string",
-            "examples": [
-              "https://..."
-            ]
-          },
-          "params": {
-            "type": "array",
-            "format": "string",
-            "examples": [
-              "-N",
-              "4",
-              "-R",
-              "infinite"
-            ]
-          }
-        }
-      },
-      "DownloadResponse": {
-        "type": "object",
-        "properties": {
-          "url": {
-            "type": "string",
-            "examples": [
-              "https://..."
-            ]
-          },
-          "params": {
-            "type": "array",
-            "format": "string",
-            "examples": [
-              "-N",
-              "4",
-              "-R",
-              "infinite"
-            ]
-          }
-        }
-      },
-      "DownloadProgress": {
-        "type": "object",
-        "properties": {
-          "process_status": {
-            "type": "integer",
-            "examples": [
-              0,
-              1,
-              2,
-              3
-            ]
-          },
-          "percentage": {
-            "type": "string",
-            "examples": [
-              "50%"
-            ]
-          },
-          "speed": {
-            "type": "integer",
-            "examples": [
-              7289347
-            ]
-          },
-          "eta": {
-            "type": "integer",
-            "examples": [
-              3600
-            ]
-          }
-        }
-      },
-      "DownloadInfo": {
-        "type": "object",
-        "properties": {
-          "url": {
-            "type": "string"
-          },
-          "title": {
-            "type": "string"
-          },
-          "thumbnail": {
-            "type": "string"
-          },
-          "resolution": {
-            "type": "string"
-          },
-          "size": {
-            "type": "integer"
-          },
-          "vcodec": {
-            "type": "string"
-          },
-          "acodec": {
-            "type": "string"
-          },
-          "extension": {
-            "type": "string"
-          },
-          "original_url": {
-            "type": "string"
-          },
-          "created_at": {
-            "type": "object"
-          }
-        }
-      },
-      "DownloadOutput": {
-        "type": "object",
-        "properties": {
-          "path": {
-            "type": "string"
-          },
-          "filename": {
-            "type": "string"
-          },
-          "saveFilePath": {
-            "type": "string"
-          }
-        }
-      },
-      "ProcessResponse": {
-        "type": "object",
-        "properties": {
-          "progress": {
-            "$ref": "#/components/schemas/DownloadProgress"
-          },
-          "info": {
-            "$ref": "#/components/schemas/DownloadInfo"
-          },
-          "output": {
-            "$ref": "#/components/schemas/DownloadOutput"
-          },
-          "params": {
-            "type": "array",
-            "format": "string"
-          }
-        }
-      }
-    },
-    "securitySchemes": {
-      "api_key": {
-        "type": "apiKey",
-        "name": "api_key",
-        "in": "header"
-      }
-    }
-  }
-}

proto/yt-dlp.proto

@@ -1,65 +0,0 @@
-syntax = "proto3";
-
-message Empty {}
-
-message BaseRequest {
-  string id = 1;
-  string url = 2;
-}
-
-message DownloadRequest {
-  string id = 1;
-  string url = 2;
-  string path = 3;
-  string rename = 4;
-  repeated string params = 5;
-}
-
-message ExecResponse {
-  string id = 1;
-}
-
-message DownloadProgress {
-  int32 status = 1;
-  string percentage = 2;
-  float speed = 3;
-  float eta = 4;
-}
-
-message DownloadInfo {
-  string url = 1;
-  string title = 2;
-  string thumbnail = 3;
-  string resolution = 4;
-  int32  size = 5;
-  string vcodec = 6;
-  string acodec = 7;
-  string extension = 8;
-  string originalURL = 9;
-  string createdAt = 10;
-}
-
-message DownloadOutput {
-  string path = 1;
-  string filename = 2;
-  string savedFilePath = 3;
-}
-
-message ProcessResponse {
-  string id = 1;
-  DownloadProgress progress = 2;
-  DownloadInfo info = 3;
-  DownloadOutput output = 4;
-  repeated string params = 5;
-}
-
-service Ytdlp {
-  rpc Exec (DownloadRequest) returns (ExecResponse);
-  rpc ExecPlaylist (DownloadRequest) returns (ExecResponse);
-
-  rpc Progress (BaseRequest) returns (DownloadProgress);
-  rpc Running (Empty) returns (stream ProcessResponse);
-
-  rpc Kill (BaseRequest) returns (ExecResponse);
-  rpc KillAll (Empty) returns (stream ExecResponse);
-}

server/config/parser.go

@@ -10,7 +10,6 @@ import (
 type Config struct {
 	CurrentLogFile  string
 	LogPath         string `yaml:"log_path"`
-	BaseURL         string `yaml:"base_url"`
 	Host            string `yaml:"host"`
 	Port            int    `yaml:"port"`
 	DownloadPath    string `yaml:"downloadPath"`
@@ -36,7 +35,6 @@ func Instance() *Config {
 	return instance
 }
 
-// Initialises the Config struct given its config file
 func (c *Config) LoadFile(filename string) error {
 	fd, err := os.Open(filename)
 	if err != nil {

server/dbutils/migrate.go

@@ -1,11 +1,10 @@
-package dbutil
+package dbutils
 
 import (
 	"context"
 	"database/sql"
 )
 
-// Run the table migration
 func AutoMigrate(ctx context.Context, db *sql.DB) error {
 	conn, err := db.Conn(ctx)
 	if err != nil {
@@ -22,18 +21,6 @@ func AutoMigrate(ctx context.Context, db *sql.DB) error {
 			content TEXT NOT NULL
 		)`,
 	)
-	if err != nil {
-		return err
-	}
-
-	db.ExecContext(
-		ctx,
-		`INSERT INTO templates (id, name, content) VALUES
-			($1, $2, $3),
-			($4, $5, $6);`,
-		"0", "default", "--no-mtime",
-		"1", "audio only", "-x",
-	)
 
 	return err
 }

server/handlers/archive.go

@@ -1,45 +1,22 @@
 package handlers
 
 import (
-	"archive/zip"
 	"encoding/base64"
 	"encoding/json"
 	"io"
-	"io/fs"
 	"net/http"
 	"net/url"
 	"os"
 	"path/filepath"
-	"regexp"
-	"slices"
 	"sort"
 	"strings"
 	"time"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
-/*
-	File based operation handlers (should be moved to rest/handlers.go) or in
-	a entirely self-contained package
-*/
-
-var (
-	videoRe = regexp.MustCompile(`(?i)/\.mov|\.mp4|\.webm|\.mvk|/gmi`)
-)
-
-func isVideo(d fs.DirEntry) bool {
-	return videoRe.MatchString(d.Name())
-}
-
-func isValidEntry(d fs.DirEntry) bool {
-	return !strings.HasPrefix(d.Name(), ".") &&
-		!strings.HasSuffix(d.Name(), ".part") &&
-		!strings.HasSuffix(d.Name(), ".ytdl")
-}
-
 type DirectoryEntry struct {
 	Name        string    `json:"name"`
 	Path        string    `json:"path"`
@@ -58,7 +35,7 @@ func walkDir(root string) (*[]DirectoryEntry, error) {
 	var files []DirectoryEntry
 
 	for _, d := range dirs {
-		if !isValidEntry(d) {
+		if !utils.IsValidEntry(d) {
 			continue
 		}
 
@@ -73,7 +50,7 @@ func walkDir(root string) (*[]DirectoryEntry, error) {
 			Path:        path,
 			Name:        d.Name(),
 			Size:        info.Size(),
-			IsVideo:     isVideo(d),
+			IsVideo:     utils.IsVideo(d),
 			IsDirectory: d.IsDir(),
 			ModTime:     info.ModTime(),
 		})
@@ -192,8 +169,14 @@ func DownloadFile(w http.ResponseWriter, r *http.Request) {
 	root := config.Instance().DownloadPath
 
 	if strings.Contains(filepath.Dir(filename), root) {
-		w.Header().Add("Content-Disposition", "inline; filename=\""+filepath.Base(filename)+"\"")
-		w.Header().Set("Content-Type", "application/octet-stream")
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(filename),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
 
 		fd, err := os.Open(filename)
 		if err != nil {
@@ -206,47 +189,3 @@ func DownloadFile(w http.ResponseWriter, r *http.Request) {
 
 	w.WriteHeader(http.StatusUnauthorized)
 }
-
-func BulkDownload(mdb *internal.MemoryDB) http.HandlerFunc {
-	return func(w http.ResponseWriter, r *http.Request) {
-		ps := slices.DeleteFunc(*mdb.All(), func(e internal.ProcessResponse) bool {
-			return e.Progress.Status != internal.StatusCompleted
-		})
-
-		if len(ps) == 0 {
-			return
-		}
-
-		zipWriter := zip.NewWriter(w)
-
-		w.Header().Add(
-			"Content-Disposition",
-			"inline; filename=download-archive-"+time.Now().Format(time.RFC3339)+".zip",
-		)
-		w.Header().Set("Content-Type", "application/zip")
-
-		for _, p := range ps {
-			wr, err := zipWriter.Create(filepath.Base(p.Output.SavedFilePath))
-			if err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			fd, err := os.Open(p.Output.SavedFilePath)
-			if err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			if _, err := io.Copy(wr, fd); err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-		}
-
-		if err := zipWriter.Close(); err != nil {
-			http.Error(w, err.Error(), http.StatusInternalServerError)
-			return
-		}
-	}
-}

server/handlers/login.go

@@ -8,19 +8,18 @@ import (
 
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
-const TOKEN_COOKIE_NAME = "jwt-yt-dlp-webui"
-
 type LoginRequest struct {
 	Username string `json:"username"`
 	Password string `json:"password"`
 }
 
 func Login(w http.ResponseWriter, r *http.Request) {
-	var req LoginRequest
-
-	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
+	req := new(LoginRequest)
+	err := json.NewDecoder(r.Body).Decode(req)
+	if err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
@@ -56,7 +55,7 @@ func Login(w http.ResponseWriter, r *http.Request) {
 
 func Logout(w http.ResponseWriter, r *http.Request) {
 	cookie := &http.Cookie{
-		Name:     TOKEN_COOKIE_NAME,
+		Name:     utils.TOKEN_COOKIE_NAME,
 		HttpOnly: true,
 		Secure:   false,
 		Expires:  time.Now(),

server/internal/balancer.go

@@ -1,34 +0,0 @@
-package internal
-
-import (
-	"container/heap"
-)
-
-type LoadBalancer struct {
-	pool Pool
-	done chan *Worker
-}
-
-func (b *LoadBalancer) Balance(work chan Process) {
-	for {
-		select {
-		case req := <-work:
-			b.dispatch(req)
-		case w := <-b.done:
-			b.completed(w)
-		}
-	}
-}
-
-func (b *LoadBalancer) dispatch(req Process) {
-	w := heap.Pop(&b.pool).(*Worker)
-	w.requests <- req
-	w.pending++
-	heap.Push(&b.pool, w)
-}
-
-func (b *LoadBalancer) completed(w *Worker) {
-	w.pending--
-	heap.Remove(&b.pool, w.index)
-	heap.Push(&b.pool, w)
-}

server/internal/common.go

@@ -2,21 +2,6 @@ package internal
 
 import "time"
 
-// Used to unmarshall yt-dlp progress
-type ProgressTemplate struct {
-	Percentage string  `json:"percentage"`
-	Speed      float32 `json:"speed"`
-	Size       string  `json:"size"`
-	Eta        float32 `json:"eta"`
-}
-
-// Defines where and how the download needs to be saved
-type DownloadOutput struct {
-	Path          string
-	Filename      string
-	SavedFilePath string `json:"savedFilePath"`
-}
-
 // Progress for the Running call
 type DownloadProgress struct {
 	Status     int     `json:"process_status"`
@@ -36,7 +21,6 @@ type DownloadInfo struct {
 	ACodec      string    `json:"acodec"`
 	Extension   string    `json:"ext"`
 	OriginalURL string    `json:"original_url"`
-	FileName    string    `json:"filename"`
 	CreatedAt   time.Time `json:"created_at"`
 }
 
@@ -95,7 +79,6 @@ type SetCookiesRequest struct {
 	Cookies string `json:"cookies"`
 }
 
-// represents a user defined collection of yt-dlp arguments
 type CustomTemplate struct {
 	Id      string `json:"id"`
 	Name    string `json:"name"`

server/internal/memory_db.go

@@ -3,6 +3,7 @@ package internal
 import (
 	"encoding/gob"
 	"errors"
+	"fmt"
 	"log/slog"
 	"os"
 	"path/filepath"
@@ -23,40 +24,61 @@ func (m *MemoryDB) Get(id string) (*Process, error) {
 	if !ok {
 		return nil, errors.New("no process found for the given key")
 	}
-
 	return entry.(*Process), nil
 }
 
 // Store a pointer of a process and return its id
 func (m *MemoryDB) Set(process *Process) string {
 	id := uuid.NewString()
-
 	m.table.Store(id, process)
 	process.Id = id
-
 	return id
 }
 
+// Update a process info/metadata, given the process id
+//
+// Deprecated: will be removed anytime soon.
+func (m *MemoryDB) UpdateInfo(id string, info DownloadInfo) error {
+	entry, ok := m.table.Load(id)
+	if ok {
+		entry.(*Process).Info = info
+		m.table.Store(id, entry)
+		return nil
+	}
+	return fmt.Errorf("can't update row with id %s", id)
+}
+
+// Update a process progress data, given the process id
+// Used for updating completition percentage or ETA.
+//
+// Deprecated: will be removed anytime soon.
+func (m *MemoryDB) UpdateProgress(id string, progress DownloadProgress) error {
+	entry, ok := m.table.Load(id)
+	if ok {
+		entry.(*Process).Progress = progress
+		m.table.Store(id, entry)
+		return nil
+	}
+	return fmt.Errorf("can't update row with id %s", id)
+}
+
 // Removes a process progress, given the process id
 func (m *MemoryDB) Delete(id string) {
 	m.table.Delete(id)
 }
 
 func (m *MemoryDB) Keys() *[]string {
-	var running []string
-
+	running := []string{}
 	m.table.Range(func(key, value any) bool {
 		running = append(running, key.(string))
 		return true
 	})
-
 	return &running
 }
 
 // Returns a slice of all currently stored processes progess
 func (m *MemoryDB) All() *[]ProcessResponse {
 	running := []ProcessResponse{}
-
 	m.table.Range(func(key, value any) bool {
 		running = append(running, ProcessResponse{
 			Id:       key.(string),
@@ -67,11 +89,10 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 		})
 		return true
 	})
-
 	return &running
 }
 
-// Persist the database in a single file named "session.dat"
+// WIP: Persist the database in a single file named "session.dat"
 func (m *MemoryDB) Persist() error {
 	running := m.All()
 
@@ -82,25 +103,29 @@ func (m *MemoryDB) Persist() error {
 		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
-	session := Session{Processes: *running}
+	session := Session{
+		Processes: *running,
+	}
 
-	if err := gob.NewEncoder(fd).Encode(session); err != nil {
+	err = gob.NewEncoder(fd).Encode(session)
+	if err != nil {
 		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
 	return nil
 }
 
-// Restore a persisted state
-func (m *MemoryDB) Restore(mq *MessageQueue, logger *slog.Logger) {
+// WIP: Restore a persisted state
+func (m *MemoryDB) Restore(logger *slog.Logger) {
 	fd, err := os.Open("session.dat")
 	if err != nil {
 		return
 	}
 
-	var session Session
+	session := Session{}
 
-	if err := gob.NewDecoder(fd).Decode(&session); err != nil {
+	err = gob.NewDecoder(fd).Decode(&session)
+	if err != nil {
 		return
 	}
 
@@ -117,8 +142,8 @@ func (m *MemoryDB) Restore(mq *MessageQueue, logger *slog.Logger) {
 
 		m.table.Store(proc.Id, restored)
 
-		if restored.Progress.Status != StatusCompleted {
-			mq.Publish(restored)
+		if restored.Progress.Percentage != "-1" {
+			go restored.Start()
 		}
 	}
 }

server/internal/message_queue.go

@@ -1,102 +1,63 @@
 package internal
 
 import (
-	"context"
-	"errors"
-	"log/slog"
-
-	evbus "github.com/asaskevich/EventBus"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"golang.org/x/sync/semaphore"
 )
 
-const queueName = "process:pending"
-
 type MessageQueue struct {
-	concurrency int
-	eventBus    evbus.Bus
-	logger      *slog.Logger
+	producerCh chan *Process
+	consumerCh chan struct{}
 }
 
 // Creates a new message queue.
 // By default it will be created with a size equals to nthe number of logical
-// CPU cores -1.
+// CPU cores.
 // The queue size can be set via the qs flag.
-func NewMessageQueue(l *slog.Logger) (*MessageQueue, error) {
-	qs := config.Instance().QueueSize
+func NewMessageQueue() *MessageQueue {
+	size := config.Instance().QueueSize
 
-	if qs <= 0 {
-		return nil, errors.New("invalid queue size")
+	if size <= 0 {
+		panic("invalid queue size")
 	}
 
 	return &MessageQueue{
-		concurrency: qs,
-		eventBus:    evbus.New(),
-		logger:      l,
-	}, nil
+		producerCh: make(chan *Process, size),
+		consumerCh: make(chan struct{}, size),
+	}
 }
 
 // Publish a message to the queue and set the task to a peding state.
 func (m *MessageQueue) Publish(p *Process) {
-	// needs to have an id set before
 	p.SetPending()
-
-	m.eventBus.Publish(queueName, p)
+	go p.SetMetadata()
+	m.producerCh <- p
 }
 
-func (m *MessageQueue) SetupConsumers() {
-	go m.downloadConsumer()
-	go m.metadataSubscriber()
+// Publish a message to the queue and set the task to a peding state.
+// ENSURE P IS PART OF A PLAYLIST
+// Needs a further review
+func (m *MessageQueue) PublishPlaylistEntry(p *Process) {
+	m.producerCh <- p
 }
 
 // Setup the consumer listener which subscribes to the changes to the producer
 // channel and triggers the "download" action.
-func (m *MessageQueue) downloadConsumer() {
-	sem := semaphore.NewWeighted(int64(m.concurrency))
-
-	m.eventBus.SubscribeAsync(queueName, func(p *Process) {
-		//TODO: provide valid context
-		sem.Acquire(context.Background(), 1)
-		defer sem.Release(1)
-
-		m.logger.Info("received process from event bus",
-			slog.String("bus", queueName),
-			slog.String("consumer", "downloadConsumer"),
-			slog.String("id", p.getShortId()),
-		)
-
-		p.Start()
-
-		m.logger.Info("started process",
-			slog.String("bus", queueName),
-			slog.String("id", p.getShortId()),
-		)
-	}, false)
+func (m *MessageQueue) Subscriber() {
+	for msg := range m.producerCh {
+		m.consumerCh <- struct{}{}
+		go func(p *Process) {
+			p.Start()
+			<-m.consumerCh
+		}(msg)
+	}
 }
 
-// Setup the metadata consumer listener which subscribes to the changes to the
-// producer channel and adds metadata to each download.
-func (m *MessageQueue) metadataSubscriber() {
-	// How many concurrent metadata fetcher jobs are spawned
-	// Since there's ongoing downloads, 1 job at time seems a good compromise
-	sem := semaphore.NewWeighted(1)
-
-	m.eventBus.SubscribeAsync(queueName, func(p *Process) {
-		//TODO: provide valid context
-		sem.Acquire(context.TODO(), 1)
-		defer sem.Release(1)
-
-		m.logger.Info("received process from event bus",
-			slog.String("bus", queueName),
-			slog.String("consumer", "metadataConsumer"),
-			slog.String("id", p.getShortId()),
-		)
-
-		if err := p.SetMetadata(); err != nil {
-			m.logger.Error("failed to retrieve metadata",
-				slog.String("id", p.getShortId()),
-				slog.String("err", err.Error()),
-			)
-		}
-	}, false)
+// Empties the message queue
+func (m *MessageQueue) Empty() {
+	for range m.producerCh {
+		<-m.producerCh
+	}
+	for range m.consumerCh {
+		<-m.consumerCh
+	}
 }

server/internal/playlist.go

@@ -5,7 +5,6 @@ import (
 	"errors"
 	"log/slog"
 	"os/exec"
-	"slices"
 	"strings"
 	"time"
 
@@ -22,7 +21,7 @@ type metadata struct {
 func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB, logger *slog.Logger) error {
 	var (
 		downloader = config.Instance().DownloaderPath
-		cmd        = exec.Command(downloader, req.URL, "--flat-playlist", "-J")
+		cmd        = exec.Command(downloader, req.URL, "-J")
 	)
 
 	stdout, err := cmd.StdoutPipe()
@@ -30,36 +29,37 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB, logger
 		return err
 	}
 
-	var m metadata
+	m := metadata{}
 
-	if err := cmd.Start(); err != nil {
+	err = cmd.Start()
+	if err != nil {
 		return err
 	}
 
-	logger.Info("decoding playlist metadata", slog.String("url", req.URL))
+	logger.Info("decoding metadata", slog.String("url", req.URL))
 
-	if err := json.NewDecoder(stdout).Decode(&m); err != nil {
+	err = json.NewDecoder(stdout).Decode(&m)
+	if err != nil {
 		return err
 	}
 
-	if err := cmd.Wait(); err != nil {
-		return err
-	}
-
-	logger.Info("decoded playlist metadata", slog.String("url", req.URL))
+	logger.Info("decoded metadata", slog.String("url", req.URL))
 
 	if m.Type == "" {
+		cmd.Wait()
 		return errors.New("probably not a valid URL")
 	}
 
 	if m.Type == "playlist" {
-		entries := slices.CompactFunc(slices.Compact(m.Entries), func(a DownloadInfo, b DownloadInfo) bool {
-			return a.URL == b.URL
-		})
+		logger.Info(
+			"playlist detected",
+			slog.String("url", req.URL),
+			slog.Int("count", m.Count),
+		)
 
-		logger.Info("playlist detected", slog.String("url", req.URL), slog.Int("count", len(entries)))
+		for i, meta := range m.Entries {
+			delta := time.Second.Microseconds() * int64(i+1)
 
-		for i, meta := range entries {
 			// detect playlist title from metadata since each playlist entry will be
 			// treated as an individual download
 			req.Rename = strings.Replace(
@@ -69,25 +69,26 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB, logger
 				1,
 			)
 
-			//TODO: it's idiotic but it works: virtually delay the creation time
-			meta.CreatedAt = time.Now().Add(time.Millisecond * time.Duration(i*10))
-
 			proc := &Process{
-				Url:      meta.URL,
+				Url:      meta.OriginalURL,
 				Progress: DownloadProgress{},
-				Output:   DownloadOutput{Filename: req.Rename},
-				Info:     meta,
-				Params:   req.Params,
-				Logger:   logger,
+				Output: DownloadOutput{
+					Filename: req.Rename,
+				},
+				Info:   meta,
+				Params: req.Params,
 			}
 
-			proc.Info.URL = meta.URL
-
-			time.Sleep(time.Millisecond)
+			proc.Info.URL = meta.OriginalURL
+			proc.Info.CreatedAt = time.Now().Add(time.Duration(delta))
 
 			db.Set(proc)
-			mq.Publish(proc)
+			proc.SetPending()
+			mq.PublishPlaylistEntry(proc)
 		}
+
+		err = cmd.Wait()
+		return err
 	}
 
 	proc := &Process{
@@ -96,7 +97,6 @@ func PlaylistDetect(req DownloadRequest, mq *MessageQueue, db *MemoryDB, logger
 		Logger: logger,
 	}
 
-	db.Set(proc)
 	mq.Publish(proc)
 	logger.Info("sending new process to message queue", slog.String("url", proc.Url))
 

server/internal/pool.go

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

server/internal/process.go

@@ -2,14 +2,10 @@ package internal
 
 import (
 	"bufio"
-	"bytes"
 	"encoding/json"
-	"errors"
 	"fmt"
-	"io"
 	"log/slog"
 	"regexp"
-	"slices"
 	"sync"
 	"syscall"
 
@@ -19,6 +15,7 @@ import (
 	"strings"
 	"time"
 
+	"github.com/marcopeocchi/fazzoletti/slices"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/rx"
@@ -38,6 +35,13 @@ const (
 	StatusErrored
 )
 
+type ProgressTemplate struct {
+	Percentage string  `json:"percentage"`
+	Speed      float32 `json:"speed"`
+	Size       string  `json:"size"`
+	Eta        float32 `json:"eta"`
+}
+
 // Process descriptor
 type Process struct {
 	Id       string
@@ -50,6 +54,11 @@ type Process struct {
 	Logger   *slog.Logger
 }
 
+type DownloadOutput struct {
+	Path     string
+	Filename string
+}
+
 // Starts spawns/forks a new yt-dlp process and parse its stdout.
 // The process is spawned to outputting a custom progress text that
 // Resembles a JSON Object in order to Unmarshal it later.
@@ -58,13 +67,13 @@ type Process struct {
 func (p *Process) Start() {
 	// escape bash variable escaping and command piping, you'll never know
 	// what they might come with...
-	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
+	p.Params = slices.Filter(p.Params, func(e string) bool {
 		match, _ := regexp.MatchString(`(\$\{)|(\&\&)`, e)
-		return match
+		return !match
 	})
 
-	p.Params = slices.DeleteFunc(p.Params, func(e string) bool {
-		return e == ""
+	p.Params = slices.Filter(p.Params, func(e string) bool {
+		return e != ""
 	})
 
 	out := DownloadOutput{
@@ -82,10 +91,7 @@ func (p *Process) Start() {
 
 	buildFilename(&p.Output)
 
-	//TODO: it spawn another one yt-dlp process, too slow.
-	go p.GetFileName(&out)
-
-	baseParams := []string{
+	params := []string{
 		strings.Split(p.Url, "?list")[0], //no playlist
 		"--newline",
 		"--no-colors",
@@ -95,12 +101,12 @@ func (p *Process) Start() {
 	}
 
 	// if user asked to manually override the output path...
-	if !(slices.Contains(p.Params, "-P") || slices.Contains(p.Params, "--paths")) {
-		p.Params = append(p.Params, "-o")
-		p.Params = append(p.Params, fmt.Sprintf("%s/%s", out.Path, out.Filename))
+	if !(slices.Includes(params, "-P") || slices.Includes(params, "--paths")) {
+		params = append(params, "-o")
+		params = append(params, fmt.Sprintf("%s/%s", out.Path, out.Filename))
 	}
 
-	params := append(baseParams, p.Params...)
+	params = append(params, p.Params...)
 
 	// ----------------- main block ----------------- //
 	cmd := exec.Command(config.Instance().DownloaderPath, params...)
@@ -114,8 +120,10 @@ func (p *Process) Start() {
 		)
 		panic(err)
 	}
+	scan := bufio.NewScanner(r)
 
-	if err := cmd.Start(); err != nil {
+	err = cmd.Start()
+	if err != nil {
 		p.Logger.Error(
 			"failed to start yt-dlp process",
 			slog.String("err", err.Error()),
@@ -134,14 +142,10 @@ func (p *Process) Start() {
 	// spawn a goroutine that does the dirty job of parsing the stdout
 	// filling the channel with as many stdout line as yt-dlp produces (producer)
 	go func() {
-		scan := bufio.NewScanner(r)
-
 		defer func() {
 			r.Close()
 			p.Complete()
-
 			doneChan <- struct{}{}
-
 			close(sourceChan)
 			close(doneChan)
 		}()
@@ -154,24 +158,21 @@ func (p *Process) Start() {
 	// Slows down the unmarshal operation to every 500ms
 	go func() {
 		rx.Sample(time.Millisecond*500, sourceChan, doneChan, func(event []byte) {
-			var progress ProgressTemplate
-
-			if err := json.Unmarshal(event, &progress); err != nil {
-				return
+			stdout := ProgressTemplate{}
+			err := json.Unmarshal(event, &stdout)
+			if err == nil {
+				p.Progress = DownloadProgress{
+					Status:     StatusDownloading,
+					Percentage: stdout.Percentage,
+					Speed:      stdout.Speed,
+					ETA:        stdout.Eta,
+				}
+				p.Logger.Info("progress",
+					slog.String("id", p.getShortId()),
+					slog.String("url", p.Url),
+					slog.String("percentege", stdout.Percentage),
+				)
 			}
-
-			p.Progress = DownloadProgress{
-				Status:     StatusDownloading,
-				Percentage: progress.Percentage,
-				Speed:      progress.Speed,
-				ETA:        progress.Eta,
-			}
-
-			p.Logger.Info("progress",
-				slog.String("id", p.getShortId()),
-				slog.String("url", p.Url),
-				slog.String("percentage", progress.Percentage),
-			)
 		})
 	}()
 
@@ -217,16 +218,11 @@ func (p *Process) Kill() error {
 }
 
 // Returns the available format for this URL
-// TODO: Move out from process.go
 func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 	cmd := exec.Command(config.Instance().DownloaderPath, p.Url, "-J")
-
 	stdout, err := cmd.Output()
+
 	if err != nil {
-		p.Logger.Error(
-			"failed to retrieve metadata",
-			slog.String("err", err.Error()),
-		)
 		return DownloadFormats{}, err
 	}
 
@@ -240,6 +236,10 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 
 	wg.Add(2)
 
+	if err != nil {
+		return DownloadFormats{}, err
+	}
+
 	log.Println(
 		cli.BgRed, "Metadata", cli.Reset,
 		cli.BgBlue, "Formats", cli.Reset,
@@ -273,31 +273,7 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 	return info, nil
 }
 
-func (p *Process) GetFileName(o *DownloadOutput) error {
-	cmd := exec.Command(
-		config.Instance().DownloaderPath,
-		"--print", "filename",
-		"-o", fmt.Sprintf("%s/%s", o.Path, o.Filename),
-		p.Url,
-	)
-	cmd.SysProcAttr = &syscall.SysProcAttr{Setpgid: true}
-
-	out, err := cmd.Output()
-	if err != nil {
-		return err
-	}
-
-	p.Output.SavedFilePath = strings.Trim(string(out), "\n")
-	return nil
-}
-
 func (p *Process) SetPending() {
-	// Since video's title isn't available yet, fill in with the URL.
-	p.Info = DownloadInfo{
-		URL:       p.Url,
-		Title:     p.Url,
-		CreatedAt: time.Now(),
-	}
 	p.Progress.Status = StatusPending
 }
 
@@ -307,17 +283,7 @@ func (p *Process) SetMetadata() error {
 
 	stdout, err := cmd.StdoutPipe()
 	if err != nil {
-		p.Logger.Error("failed to connect to stdout",
-			slog.String("id", p.getShortId()),
-			slog.String("url", p.Url),
-			slog.String("err", err.Error()),
-		)
-		return err
-	}
-
-	stderr, err := cmd.StderrPipe()
-	if err != nil {
-		p.Logger.Error("failed to connect to stderr",
+		p.Logger.Error("failed retrieving info",
 			slog.String("id", p.getShortId()),
 			slog.String("url", p.Url),
 			slog.String("err", err.Error()),
@@ -330,36 +296,32 @@ func (p *Process) SetMetadata() error {
 		CreatedAt: time.Now(),
 	}
 
-	if err := cmd.Start(); err != nil {
+	err = cmd.Start()
+	if err != nil {
 		return err
 	}
 
-	var bufferedStderr bytes.Buffer
-
-	go func() {
-		io.Copy(&bufferedStderr, stderr)
-	}()
-
 	p.Logger.Info("retrieving metadata",
 		slog.String("id", p.getShortId()),
 		slog.String("url", p.Url),
 	)
 
-	if err := json.NewDecoder(stdout).Decode(&info); err != nil {
+	err = json.NewDecoder(stdout).Decode(&info)
+	if err != nil {
 		return err
 	}
 
 	p.Info = info
 	p.Progress.Status = StatusPending
 
-	if err := cmd.Wait(); err != nil {
-		return errors.New(bufferedStderr.String())
-	}
+	err = cmd.Wait()
 
-	return nil
+	return err
 }
 
-func (p *Process) getShortId() string { return strings.Split(p.Id, "-")[0] }
+func (p *Process) getShortId() string {
+	return strings.Split(p.Id, "-")[0]
+}
 
 func buildFilename(o *DownloadOutput) {
 	if o.Filename != "" && strings.Contains(o.Filename, ".%(ext)s") {

server/internal/stack.go

@@ -1,37 +1,33 @@
 package internal
 
-type Node[T any] struct {
-	Value T
-}
-
 type Stack[T any] struct {
-	Nodes []*Node[T]
-	count int
+	Elements []*T
+	count    int
 }
 
 func NewStack[T any]() *Stack[T] {
 	return &Stack[T]{
-		Nodes: make([]*Node[T], 10),
+		Elements: make([]*T, 10),
 	}
 }
 
 func (s *Stack[T]) Push(val T) {
-	if s.count >= len(s.Nodes) {
-		Nodes := make([]*Node[T], len(s.Nodes)*2)
-		copy(Nodes, s.Nodes)
-		s.Nodes = Nodes
+	if s.count >= len(s.Elements) {
+		Elements := make([]*T, len(s.Elements)*2)
+		copy(Elements, s.Elements)
+		s.Elements = Elements
 	}
-	s.Nodes[s.count] = &Node[T]{Value: val}
+	s.Elements[s.count] = &val
 	s.count++
 }
 
-func (s *Stack[T]) Pop() *Node[T] {
+func (s *Stack[T]) Pop() *T {
 	if s.count == 0 {
 		return nil
 	}
-	node := s.Nodes[s.count-1]
+	Element := s.Elements[s.count-1]
 	s.count--
-	return node
+	return Element
 }
 
 func (s *Stack[T]) IsEmpty() bool {

server/internal/worker.go

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

server/logging/file_logger.go

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

server/logging/handler.go

@@ -61,10 +61,7 @@ func sse(w http.ResponseWriter, r *http.Request) {
 		}
 
 		sb.WriteString("event: log\n")
-		sb.WriteString("data: ")
-		sb.WriteString(b.String())
-		sb.WriteRune('\n')
-		sb.WriteRune('\n')
+		sb.WriteString("data: " + b.String() + "\n\n")
 
 		fmt.Fprint(w, sb.String())
 

server/logging/observable_logger.go

@@ -6,21 +6,10 @@ import (
 	"github.com/reactivex/rxgo/v2"
 )
 
-/*
-	Logger implementation using the observable pattern.
-	Implements io.Writer interface.
-
-	The observable is an event source which drops everythigng unless there's
-	a subscriber connected.
-
-	The observer implementatios are a http ServerSentEvents handler and a
-	websocket one in handler.go
-*/
-
 var (
 	logsChan       = make(chan rxgo.Item, 100)
 	logsObservable = rxgo.
-			FromEventSource(logsChan, rxgo.WithBackPressureStrategy(rxgo.Drop)).
+			FromChannel(logsChan, rxgo.WithBackPressureStrategy(rxgo.Drop)).
 			BufferWithTime(rxgo.WithDuration(time.Millisecond * 500))
 )
 

server/middleware/jwt.go

@@ -11,18 +11,20 @@ import (
 )
 
 func validateToken(tokenValue string) error {
-	token, err := jwt.Parse(tokenValue, func(t *jwt.Token) (interface{}, error) {
+	if tokenValue == "" {
+		return errors.New("invalid token")
+	}
+
+	token, _ := jwt.Parse(tokenValue, func(t *jwt.Token) (interface{}, error) {
 		if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
 			return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
 		}
 		return []byte(os.Getenv("JWT_SECRET")), nil
 	})
-	if err != nil {
-		return err
-	}
 
 	if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
 		expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
+
 		if err != nil {
 			return err
 		}
@@ -37,9 +39,6 @@ func validateToken(tokenValue string) error {
 	return nil
 }
 
-// Authentication does NOT use http-Only cookies since there's not risk for XSS
-// By exposing the server through https it's completely safe to use httpheaders
-
 func Authenticated(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		token := r.Header.Get("X-Authentication")

server/middleware/spa_handler.go

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

server/rest/common.go

@@ -1,15 +0,0 @@
-package rest
-
-import (
-	"database/sql"
-	"log/slog"
-
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
-)
-
-type ContainerArgs struct {
-	DB     *sql.DB
-	MDB    *internal.MemoryDB
-	MQ     *internal.MessageQueue
-	Logger *slog.Logger
-}

server/rest/container.go

@@ -1,21 +1,24 @@
 package rest
 
 import (
+	"database/sql"
+
 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 )
 
-func Container(args *ContainerArgs) *Handler {
+func Container(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) *Handler {
 	var (
-		service = ProvideService(args)
+		service = ProvideService(db, mdb, mq)
 		handler = ProvideHandler(service)
 	)
 	return handler
 }
 
-func ApplyRouter(args *ContainerArgs) func(chi.Router) {
-	h := Container(args)
+func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue) func(chi.Router) {
+	h := Container(db, mdb, mq)
 
 	return func(r chi.Router) {
 		if config.Instance().RequireAuth {
@@ -23,10 +26,12 @@ func ApplyRouter(args *ContainerArgs) func(chi.Router) {
 		}
 		r.Post("/exec", h.Exec())
 		r.Get("/running", h.Running())
-		r.Get("/version", h.GetVersion())
 		r.Post("/cookies", h.SetCookies())
 		r.Post("/template", h.AddTemplate())
 		r.Get("/template/all", h.GetTemplates())
 		r.Delete("/template/{id}", h.DeleteTemplate())
+
+		r.Get("/tree", h.DirectoryTree())
+		r.Get("/d/{id}", h.DownloadFile())
 	}
 }

server/rest/handlers.go

@@ -2,7 +2,10 @@ package rest
 
 import (
 	"encoding/json"
+	"io"
 	"net/http"
+	"os"
+	"path/filepath"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
@@ -12,17 +15,13 @@ type Handler struct {
 	service *Service
 }
 
-/*
-	REST version of the JSON-RPC interface
-*/
-
 func (h *Handler) Exec() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		defer r.Body.Close()
 
 		w.Header().Set("Content-Type", "application/json")
 
-		var req internal.DownloadRequest
+		req := internal.DownloadRequest{}
 
 		if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
@@ -159,20 +158,54 @@ func (h *Handler) DeleteTemplate() http.HandlerFunc {
 	}
 }
 
-func (h *Handler) GetVersion() http.HandlerFunc {
+func (h *Handler) DirectoryTree() http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		defer r.Body.Close()
 
 		w.Header().Set("Content-Type", "application/json")
 
-		version, err := h.service.GetVersion(r.Context())
+		tree, err := h.service.DirectoryTree(r.Context())
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 			return
 		}
 
-		if err := json.NewEncoder(w).Encode(version); err != nil {
+		err = json.NewEncoder(w).Encode(tree)
+		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
 		}
 	}
 }
+
+func (h *Handler) DownloadFile() 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")
+
+		path, err := h.service.DownloadFile(r.Context(), id)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(*path),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
+
+		fd, err := os.Open(*path)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
+	}
+}

server/rest/provider.go

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

server/rest/service.go

@@ -6,12 +6,10 @@ import (
 	"errors"
 	"log/slog"
 	"os"
-	"os/exec"
-	"time"
 
 	"github.com/google/uuid"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
 )
 
 type Service struct {
@@ -122,22 +120,15 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 	return err
 }
 
-func (s *Service) GetVersion(ctx context.Context) (string, error) {
-	ch := make(chan string, 1)
-
-	c, cancel := context.WithTimeout(ctx, time.Second*10)
-	defer cancel()
-
-	cmd := exec.CommandContext(c, config.Instance().DownloaderPath, "--version")
-	go func() {
-		stdout, _ := cmd.Output()
-		ch <- string(stdout)
-	}()
-
-	select {
-	case <-c.Done():
-		return "", errors.New("requesting yt-dlp version took too long")
-	case res := <-ch:
-		return res, nil
-	}
+func (s *Service) DirectoryTree(ctx context.Context) (*internal.Stack[sys.FSNode], error) {
+	return sys.DirectoryTree()
+}
+
+func (s *Service) DownloadFile(ctx context.Context, id string) (*string, error) {
+	p, err := s.mdb.Get(id)
+	if err != nil {
+		return nil, err
+	}
+
+	return &p.Output.Path, nil
 }

server/rpc/handlers.go

@@ -14,7 +14,6 @@ var upgrader = websocket.Upgrader{
 	},
 }
 
-// WebSockets JSON-RPC handler
 func WebSocket(w http.ResponseWriter, r *http.Request) {
 	c, err := upgrader.Upgrade(w, r, nil)
 	if err != nil {
@@ -48,7 +47,6 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 	}
 }
 
-// HTTP-POST JSON-RPC handler
 func Post(w http.ResponseWriter, r *http.Request) {
 	defer r.Body.Close()
 

server/rpc/service.go

@@ -54,6 +54,7 @@ func (s *Service) ExecPlaylist(args internal.DownloadRequest, result *string) er
 	}
 
 	*result = ""
+
 	return nil
 }
 
@@ -63,17 +64,14 @@ func (s *Service) Progess(args Args, progress *internal.DownloadProgress) error
 	if err != nil {
 		return err
 	}
-
 	*progress = proc.Progress
 	return nil
 }
 
 // Progess retrieves available format for a given resource
 func (s *Service) Formats(args Args, meta *internal.DownloadFormats) error {
-	var (
-		err error
-		p   = internal.Process{Url: args.URL, Logger: s.logger}
-	)
+	var err error
+	p := internal.Process{Url: args.URL, Logger: s.logger}
 	*meta, err = p.GetFormatsSync()
 	return err
 }
@@ -93,12 +91,11 @@ func (s *Service) Running(args NoArgs, running *Running) error {
 // Kill kills a process given its id and remove it from the memoryDB
 func (s *Service) Kill(args string, killed *string) error {
 	s.logger.Info("Trying killing process with id", slog.String("id", args))
-
 	proc, err := s.db.Get(args)
+
 	if err != nil {
 		return err
 	}
-
 	if proc != nil {
 		err = proc.Kill()
 		s.db.Delete(proc.Id)
@@ -112,24 +109,19 @@ func (s *Service) Kill(args string, killed *string) error {
 // the memory db
 func (s *Service) KillAll(args NoArgs, killed *string) error {
 	s.logger.Info("Killing all spawned processes")
-
-	var (
-		keys = s.db.Keys()
-		err  error
-	)
-
+	keys := s.db.Keys()
+	var err error
 	for _, key := range *keys {
 		proc, err := s.db.Get(key)
 		if err != nil {
 			return err
 		}
-
 		if proc != nil {
 			proc.Kill()
 			s.db.Delete(proc.Id)
 		}
 	}
-
+	s.mq.Empty()
 	return err
 }
 
@@ -143,42 +135,27 @@ func (s *Service) Clear(args string, killed *string) error {
 // FreeSpace gets the available from package sys util
 func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
 	freeSpace, err := sys.FreeSpace()
-	if err != nil {
-		return err
-	}
-
 	*free = freeSpace
 	return err
 }
 
 // Return a flattned tree of the download directory
-func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
+func (s *Service) DirectoryTree(args NoArgs, tree *internal.Stack[sys.FSNode]) error {
 	dfsTree, err := sys.DirectoryTree()
-
-	if err != nil {
-		*tree = nil
-		return err
-	}
-
 	if dfsTree != nil {
 		*tree = *dfsTree
 	}
-
-	return nil
+	return err
 }
 
 // Updates the yt-dlp binary using its builtin function
 func (s *Service) UpdateExecutable(args NoArgs, updated *bool) error {
 	s.logger.Info("Updating yt-dlp executable to the latest release")
-
-	if err := updater.UpdateExecutable(); err != nil {
-		s.logger.Error("Failed updating yt-dlp")
-		*updated = false
+	err := updater.UpdateExecutable()
+	if err != nil {
+		*updated = true
 		return err
 	}
-
-	*updated = true
-	s.logger.Info("Succesfully updated yt-dlp")
-
-	return nil
+	*updated = false
+	return err
 }

server/rpc/wrapper.go

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

server/rx/extensions.go

@@ -6,9 +6,6 @@ import "time"
 //
 // Debounce emits the most recently emitted value from the source
 // withing the timespan set by the span time.Duration
-//
-// Soon it will be deprecated since it doesn't add anything useful.
-// (It lowers the CPU usage by a negligible margin)
 func Sample(span time.Duration, source chan []byte, done chan struct{}, fn func(e []byte)) {
 	var (
 		item   []byte

server/server.go

@@ -7,19 +7,17 @@ import (
 	"io"
 	"io/fs"
 	"log/slog"
-	"net"
 	"net/http"
 	"net/rpc"
 	"os"
 	"os/signal"
-	"strings"
 	"syscall"
 	"time"
 
 	"github.com/go-chi/chi/v5"
 	"github.com/go-chi/cors"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/dbutil"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/dbutils"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/handlers"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/logging"
@@ -30,19 +28,8 @@ import (
 	_ "modernc.org/sqlite"
 )
 
-type RunConfig struct {
-	Host        string
-	Port        int
-	DBPath      string
-	LogFile     string
-	FileLogging bool
-	App         fs.FS
-	Swagger     fs.FS
-}
-
 type serverConfig struct {
 	frontend fs.FS
-	swagger  fs.FS
 	logger   *slog.Logger
 	host     string
 	port     int
@@ -51,57 +38,36 @@ type serverConfig struct {
 	mq       *internal.MessageQueue
 }
 
-func RunBlocking(cfg *RunConfig) {
+func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {
 	var mdb internal.MemoryDB
 
-	logWriters := []io.Writer{
-		os.Stdout,
-		logging.NewObservableLogger(),
-	}
-
-	if cfg.FileLogging {
-		logger, err := logging.NewRotableLogger(cfg.LogFile)
-		if err != nil {
-			panic(err)
-		}
-
-		go func() {
-			for {
-				time.Sleep(time.Hour * 24)
-				logger.Rotate()
-			}
-		}()
-
-		logWriters = append(logWriters, logger)
-	}
-
 	logger := slog.New(
-		slog.NewTextHandler(io.MultiWriter(logWriters...), &slog.HandlerOptions{}),
+		slog.NewTextHandler(
+			io.MultiWriter(os.Stdout, logging.NewObservableLogger()),
+			nil,
+		),
 	)
 
-	db, err := sql.Open("sqlite", cfg.DBPath)
+	mdb.Restore(logger)
+
+	db, err := sql.Open("sqlite", dbPath)
 	if err != nil {
 		logger.Error("failed to open database", slog.String("err", err.Error()))
 	}
 
-	if err := dbutil.AutoMigrate(context.Background(), db); err != nil {
+	err = dbutils.AutoMigrate(context.Background(), db)
+	if err != nil {
 		logger.Error("failed to init database", slog.String("err", err.Error()))
 	}
 
-	mq, err := internal.NewMessageQueue(logger)
-	if err != nil {
-		panic(err)
-	}
-	mq.SetupConsumers()
-
-	go mdb.Restore(mq, logger)
+	mq := internal.NewMessageQueue()
+	go mq.Subscriber()
 
 	srv := newServer(serverConfig{
-		frontend: cfg.App,
-		swagger:  cfg.Swagger,
+		frontend: frontend,
 		logger:   logger,
-		host:     cfg.Host,
-		port:     cfg.Port,
+		host:     host,
+		port:     port,
 		mdb:      &mdb,
 		mq:       mq,
 		db:       db,
@@ -110,25 +76,9 @@ func RunBlocking(cfg *RunConfig) {
 	go gracefulShutdown(srv, &mdb)
 	go autoPersist(time.Minute*5, &mdb, logger)
 
-	var (
-		network = "tcp"
-		address = fmt.Sprintf("%s:%d", cfg.Host, cfg.Port)
-	)
+	logger.Info("yt-dlp-webui started", slog.Int("port", port))
 
-	if strings.HasPrefix(cfg.Host, "/") {
-		network = "unix"
-		address = cfg.Host
-	}
-
-	listener, err := net.Listen(network, address)
-	if err != nil {
-		logger.Error("failed to listen", slog.String("err", err.Error()))
-		return
-	}
-
-	logger.Info("yt-dlp-webui started", slog.String("address", address))
-
-	if err := srv.Serve(listener); err != nil {
+	if err := srv.ListenAndServe(); err != nil {
 		logger.Warn("http server stopped", slog.String("err", err.Error()))
 	}
 }
@@ -157,11 +107,7 @@ func newServer(c serverConfig) *http.Server {
 	// use in dev
 	// r.Use(middleware.Logger)
 
-	baseUrl := config.Instance().BaseURL
-	r.Mount(baseUrl+"/", http.StripPrefix(baseUrl, http.FileServerFS(c.frontend)))
-
-	// swagger
-	r.Mount("/openapi", http.FileServerFS(c.swagger))
+	r.Mount("/", http.FileServer(http.FS(c.frontend)))
 
 	// Archive routes
 	r.Route("/archive", func(r chi.Router) {
@@ -172,7 +118,6 @@ func newServer(c serverConfig) *http.Server {
 		r.Post("/delete", handlers.DeleteFile)
 		r.Get("/d/{id}", handlers.DownloadFile)
 		r.Get("/v/{id}", handlers.SendFile)
-		r.Get("/bulk", handlers.BulkDownload(c.mdb))
 	})
 
 	// Authentication routes
@@ -185,17 +130,15 @@ func newServer(c serverConfig) *http.Server {
 	r.Route("/rpc", ytdlpRPC.ApplyRouter())
 
 	// REST API handlers
-	r.Route("/api/v1", rest.ApplyRouter(&rest.ContainerArgs{
-		DB:     c.db,
-		MDB:    c.mdb,
-		MQ:     c.mq,
-		Logger: c.logger,
-	}))
+	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mdb, c.mq))
 
 	// Logging
 	r.Route("/log", logging.ApplyRouter())
 
-	return &http.Server{Handler: r}
+	return &http.Server{
+		Addr:    fmt.Sprintf("%s:%d", c.host, c.port),
+		Handler: r,
+	}
 }
 
 func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
@@ -212,7 +155,7 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 		defer func() {
 			db.Persist()
 			stop()
-			srv.Shutdown(context.Background())
+			srv.Shutdown(context.TODO())
 		}()
 	}()
 }

server/sys/fs.go

@@ -18,43 +18,35 @@ func FreeSpace() (uint64, error) {
 	return (stat.Bavail * uint64(stat.Bsize)), nil
 }
 
+type FSNode struct {
+	path     string
+	children []FSNode
+}
+
 // Build a directory tree started from the specified path using DFS.
 // Then return the flattened tree represented as a list.
-func DirectoryTree() (*[]string, error) {
-	type Node struct {
-		path     string
-		children []Node
-	}
+func DirectoryTree() (*internal.Stack[FSNode], error) {
+	rootPath := config.Instance().DownloadPath
 
-	var (
-		rootPath = config.Instance().DownloadPath
+	stack := internal.NewStack[FSNode]()
 
-		stack     = internal.NewStack[Node]()
-		flattened = make([]string, 0)
-	)
-
-	stack.Push(Node{path: rootPath})
-
-	flattened = append(flattened, rootPath)
+	stack.Push(FSNode{path: rootPath})
 
 	for stack.IsNotEmpty() {
-		current := stack.Pop().Value
-
+		current := stack.Pop()
 		children, err := os.ReadDir(current.path)
 		if err != nil {
 			return nil, err
 		}
 		for _, entry := range children {
-			var (
-				childPath = filepath.Join(current.path, entry.Name())
-				childNode = Node{path: childPath}
-			)
+			childPath := filepath.Join(current.path, entry.Name())
+			childNode := FSNode{path: childPath}
+
 			if entry.IsDir() {
 				current.children = append(current.children, childNode)
 				stack.Push(childNode)
-				flattened = append(flattened, childNode.path)
 			}
 		}
 	}
-	return &flattened, nil
+	return stack, nil
 }

server/utils/cookie.go

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

server/utils/file.go

@@ -0,0 +1,29 @@
+package utils
+
+import (
+	"crypto/sha256"
+	"encoding/hex"
+	"io/fs"
+	"regexp"
+	"strings"
+)
+
+var (
+	videoRe = regexp.MustCompile(`(?i)/\.mov|\.mp4|\.webm|\.mvk|/gmi`)
+)
+
+func IsVideo(d fs.DirEntry) bool {
+	return videoRe.MatchString(d.Name())
+}
+
+func IsValidEntry(d fs.DirEntry) bool {
+	return !strings.HasPrefix(d.Name(), ".") &&
+		!strings.HasSuffix(d.Name(), ".part") &&
+		!strings.HasSuffix(d.Name(), ".ytdl")
+}
+
+func ShaSumString(path string) string {
+	h := sha256.New()
+	h.Write([]byte(path))
+	return hex.EncodeToString(h.Sum(nil))
+}

server/utils/logrotate.go

@@ -0,0 +1,55 @@
+package utils
+
+import (
+	"io"
+	"io/fs"
+	"os"
+	"path/filepath"
+	"time"
+
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
+)
+
+func LogRotate() (*os.File, error) {
+	logs := findLogs()
+
+	for _, log := range logs {
+		logfd, err := os.Open(log)
+		if err != nil {
+			return nil, err
+		}
+
+		gzWriter, err := os.Create(log + ".gz")
+		if err != nil {
+			return nil, err
+		}
+
+		_, err = io.Copy(gzWriter, logfd)
+		if err != nil {
+			return nil, err
+		}
+	}
+
+	logfile := time.Now().String() + ".log"
+	config.Instance().CurrentLogFile = logfile
+
+	return os.Create(logfile)
+}
+
+func findLogs() []string {
+	var (
+		logfiles []string
+		root     = config.Instance().LogPath
+	)
+
+	filepath.WalkDir(root, func(path string, d fs.DirEntry, err error) error {
+		if err != nil {
+			return err
+		}
+		if filepath.Ext(d.Name()) == ".log" {
+			logfiles = append(logfiles, path)
+		}
+		return nil
+	})
+	return logfiles
+}

ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ui/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

ui/README.md

@@ -0,0 +1,47 @@
+# Svelte + TS + Vite
+
+This template should help get you started developing with Svelte and TypeScript in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `allowJs` in the TS template?**
+
+While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```ts
+// store.ts
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

ui/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/svelte.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>yt-dlp WebUI</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

ui/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@tsconfig/svelte": "^5.0.2",
+    "@zerodevx/svelte-toast": "^0.9.5",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.34",
+    "svelte": "^4.2.8",
+    "svelte-check": "^3.6.2",
+    "tailwindcss": "^3.4.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^5.0.8",
+    "fp-ts": "^2.16.2",
+    "lucide-svelte": "^0.323.0",
+    "svelte-spa-router": "^4.0.1"
+  }
+}

ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

ui/public/svelte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

ui/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

ui/src/App.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+  import Router from 'svelte-spa-router';
+  import { wrap } from 'svelte-spa-router/wrap';
+  import Footer from './lib/Footer.svelte';
+  import Home from './views/Home.svelte';
+  import Navbar from './lib/Navbar.svelte';
+
+  const routes = {
+    '/': Home,
+    '/settings': wrap({
+      asyncComponent: () => import('./views/SettingsView.svelte'),
+    }),
+  };
+</script>
+
+<main
+  class="bg-neutral-50 dark:bg-neutral-900 h-screen text-neutral-950 dark:text-neutral-50"
+>
+  <Navbar />
+  <Router {routes} />
+  <Footer />
+  <SvelteToast />
+  <!-- <FloatingAction /> -->
+</main>

ui/src/app.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* body {
+  font-family: "Roboto";
+} */

ui/src/lib/Button.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let disabled: boolean = false;
+  export { clazz as class };
+</script>
+
+<button
+  class={`px-2.5 py-2 rounded-lg bg-blue-300 hover:bg-blue-400 hover:duration-150 text-sm font-semibold ${
+    disabled && 'bg-neutral-300 hover:bg-neutral-300'
+  } ${clazz}`}
+  {disabled}
+  on:click
+>
+  <slot />
+</button>

ui/src/lib/Chip.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  export let text: string;
+</script>
+
+<div
+  class="flex items-center gap-1.5 p-1 bg-blue-200 rounded-lg text-neutral-900"
+>
+  <slot />
+  {text}
+</div>

ui/src/lib/CookiesTextField.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { toast } from '@zerodevx/svelte-toast';
+  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 { get } from 'svelte/store';
+  import { ffetch } from './ffetch';
+  import { cookiesTemplate, serverApiEndpoint } from './store';
+  import { debounce } from './utils';
+
+  const flag = '--cookies=cookies.txt';
+
+  let cookies = localStorage.getItem('cookies') ?? '';
+
+  const validateCookie = (cookie: string) =>
+    pipe(
+      cookie,
+      (cookie) => cookie.replace(/\s\s+/g, ' '),
+      (cookie) => cookie.replaceAll('\t', ' '),
+      (cookie) => cookie.split(' '),
+      E.of,
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f.length === 7,
+          () => `missing parts`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[0].length > 0,
+          () => 'missing domain',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[1] === 'TRUE' || f[1] === 'FALSE',
+          () => `invalid include subdomains`,
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[2].length > 0,
+          () => 'invalid path',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[3] === 'TRUE' || f[3] === 'FALSE',
+          () => 'invalid secure flag',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => isFinite(Number(f[4])),
+          () => 'invalid expiration',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[5].length > 0,
+          () => 'invalid name',
+        ),
+      ),
+      E.flatMap(
+        E.fromPredicate(
+          (f) => f[6].length > 0,
+          () => 'invalid value',
+        ),
+      ),
+    );
+
+  const 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) => toast.push(`Error in line ${i + 1}: ${l}`),
+            () => E.isRight(either),
+          ),
+        ),
+      ),
+      A.filter(Boolean),
+      A.match(
+        () => false,
+        (c) => {
+          toast.push(`Valid ${c.length} Netscape cookies`);
+          return true;
+        },
+      ),
+    );
+
+  const submitCookies = (cookies: string) =>
+    ffetch(`${get(serverApiEndpoint)}/api/v1/cookies`, {
+      method: 'POST',
+      body: JSON.stringify({
+        cookies,
+      }),
+    })();
+
+  const execute = (cookies: KeyboardEvent) =>
+    pipe(
+      cookies.target as HTMLTextAreaElement,
+      (cookies) => cookies.value,
+      O.fromPredicate(validateNetscapeCookies),
+      O.match(
+        () => cookiesTemplate.set(''),
+        async (cookies) => {
+          pipe(
+            await submitCookies(cookies),
+            E.match(
+              (l) => toast.push(l),
+              () => {
+                toast.push(`Saved Netscape cookies`);
+                cookiesTemplate.set(flag);
+                localStorage.setItem('cookies', cookies);
+              },
+            ),
+          );
+        },
+      ),
+    );
+</script>
+
+<textarea
+  cols="80"
+  rows="8"
+  value={cookies}
+  on:keyup={debounce(execute, 500)}
+/>

ui/src/lib/DownloadCard.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import Chip from './Chip.svelte';
+  import { rpcClient, serverApiEndpoint } from './store';
+  import type { RPCResult } from './types';
+  import { formatSpeedMiB, roundMiB } from './utils';
+
+  export let download: RPCResult;
+
+  const remove = (id: string) => get(rpcClient).kill(id);
+</script>
+
+<div
+  class="flex gap-4
+  bg-neutral-100 dark:bg-neutral-800
+  p-2 md:p-4
+  rounded-lg shadow-lg
+  border dark:border-neutral-700"
+>
+  <div
+    class="h-full hidden sm:block w-96 bg-cover bg-center rounded"
+    style="background-image: url({download.info.thumbnail})"
+  />
+
+  <div class="flex flex-col justify-between gap-2 w-full">
+    <div>
+      <h2 class="font-bold text-lg">{download.info.title}</h2>
+      <p
+        class="font-mono text-sm mt-2 p-1 break-all bg-neutral-200 dark:bg-neutral-700 rounded"
+      >
+        {download.info.url}
+      </p>
+    </div>
+
+    <div class="flex flex-col justify-end gap-2 select-none flex-wrap">
+      <div class="hidden sm:flex items-center gap-2 text-sm">
+        {#if download.info.vcodec}
+          <Chip text={download.info.vcodec} />
+        {/if}
+        {#if download.info.acodec}
+          <Chip text={download.info.acodec} />
+        {/if}
+        {#if download.info.ext}
+          <Chip text={download.info.ext} />
+        {/if}
+        {#if download.info.resolution}
+          <Chip text={download.info.resolution} />
+        {/if}
+        {#if download.info.filesize_approx}
+          <Chip text={roundMiB(download.info.filesize_approx)} />
+        {/if}
+        <!-- {#if download.progress.process_status}
+          <Chip text={mapProcessStatus(download.progress.process_status)} />
+        {/if} -->
+        {#if download.progress.speed}
+          <Chip text={formatSpeedMiB(download.progress.speed)} />
+        {/if}
+      </div>
+
+      <div class="flex gap-2">
+        <Button class="w-14" on:click={() => remove(download.id)}>Stop</Button>
+        {#if download.progress.process_status === 2}
+          <Button class="w-18">Download</Button>
+          <!-- <a href={`${$serverApiEndpoint}/api/v1/d/${download.id}`}>d</a> -->
+        {/if}
+      </div>
+
+      <div
+        class="w-full mt-4 h-2 rounded-full bg-neutral-200 dark:bg-neutral-700"
+      >
+        <div
+          class={`h-2 rounded-full ${
+            download.progress.process_status === 2
+              ? 'bg-green-600'
+              : 'bg-blue-500'
+          }`}
+          style="width: {download.progress.percentage}"
+        />
+      </div>
+    </div>
+  </div>
+</div>