Added favicon

Closes #139

.github/workflows/docker-publish.yml

@@ -68,7 +68,7 @@ jobs:
         with:
           context: .
           push: true
-          platforms: linux/amd64,linux/arm/v7,linux/arm64
+          platforms: linux/amd64,linux/arm64
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels}}
 

.gitignore

@@ -1,6 +1,4 @@
 dist
-package-lock.json
-pnpm-lock.yaml
 .pnpm-debug.log
 node_modules
 .env
@@ -15,3 +13,5 @@ yt-dlp-webui
 session.dat
 config.yml
 cookies.txt
+__debug*
+app/

README.md

@@ -1,3 +1,8 @@
+> [!IMPORTANT]
+> Major frontend refactoring in progress.  
+> I won't add features or fix minor issues until completition.
+---
+
 # yt-dlp Web UI
 
 A not so terrible web ui for yt-dlp.  
@@ -17,9 +22,8 @@ docker pull marcobaobao/yt-dlp-webui
 ```sh
 # latest dev
 docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:latest
-# latest stable version
-docker pull ghcr.io/marcopeocchi/yt-dlp-web-ui:master
 ```
+![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)
@@ -75,20 +79,10 @@ The currently avaible settings are:
 
 ## Format selection
 
-![fs1](https://i.ibb.co/8dgS6ym/image.png)
-
 This feature is disabled by default as this intended to be used to retrieve the best quality automatically.
 
 To enable it just go to the settings page and enable the **Enable video/audio formats selection** flag!
 
-Future releases will have:
--   ~~Multi download~~ *done*
--   ~~Exctract audio~~ *done*
--   ~~Format selection~~ *done*
--   ~~Download archive~~ *done*
--   ~~ARM Build~~ *done available through ghcr.io*
--   Playlist support
-
 ## Troubleshooting
 -   **It says that it isn't connected/ip in the header is not defined.**
     - You must set the server ip address in the settings section (gear icon).
@@ -97,7 +91,6 @@ Future releases will have:
 
 ## [Docker](https://github.com/marcopeocchi/yt-dlp-web-ui/pkgs/container/yt-dlp-web-ui) installation
 ```sh
-# recomended for ARM and x86 devices 
 docker pull marcobaobao/yt-dlp-webui
 docker run -d -p 3033:3033 -v <your dir>:/downloads marcobaobao/yt-dlp-webui
 ```
@@ -167,6 +160,8 @@ Usage yt-dlp-webui:
         yt-dlp executable path (default "yt-dlp")
   -out string
         Where files will be saved (default ".")
+  -host string
+        Host where server will listen at (default "0.0.0.0")
   -port int
         Port where server will listen at (default 3033)
   -qs int
@@ -248,12 +243,5 @@ Just as an overview, these are the available methods:
 
 For more information open an issue on GitHub and I will provide more info ASAP.
 
-## FAQ
--   **Will it availabe for Raspberry Pi/ generic ARM devices?**
-    - Yes, it's cross platform :)
-      If you plan to use it on a Raspberry Pi ensure to have fast and durable storage.
--   **Why the docker image is so heavy?**
-    - Originally it was 1.8GB circa, now it has been slimmed to ~340MB compressed. This is due to the fact that it encapsule a basic Alpine linux image + FFmpeg + Node.js + Python3 + yt-dlp.
-    - **Update**: Since Golang migration and Multi-Stage builds the Docker image is now 75MB circa. A reduction of over 400% in size :D.
 ## What yt-dlp-webui is not
 `yt-dlp-webui` isn't your ordinary website where to download stuff from the internet, so don't try asking for links of where this is hosted. It's a self hosted platform for a Linux NAS.

frontend/index.html

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

frontend/package.json

@@ -8,29 +8,31 @@
   },
   "author": "marcopeocchi",
   "license": "MPL-2.0",
+  "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/roboto": "^5.0.6",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "fp-ts": "^2.16.1",
+    "@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-helmet": "^6.1.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.21.2",
     "recoil": "^0.7.7",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.0.4",
-    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.29",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-helmet": "^6.1.8",
+    "@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.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0"
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
   }
 }

frontend/src/Layout.tsx

@@ -16,8 +16,7 @@ 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 { Helmet } from 'react-helmet'
+import { Suspense, useMemo, useState } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
@@ -28,7 +27,9 @@ 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)
@@ -50,124 +51,137 @@ export default function Layout() {
 
   const toggleDrawer = () => setOpen(state => !state)
 
+  const { i18n } = useI18n()
+
   return (
     <ThemeProvider theme={theme}>
-      <SocketSubscriber>
-        <Helmet>
-          <title>
-            {settings.appTitle}
-          </title>
-        </Helmet>
-        <Box sx={{ display: 'flex' }}>
-          <CssBaseline />
-          <AppBar position="absolute" open={open}>
-            <Toolbar sx={{ pr: '24px' }}>
-              <IconButton
-                edge="start"
-                color="inherit"
-                aria-label="open drawer"
-                onClick={toggleDrawer}
-                sx={{
-                  marginRight: '36px',
-                  ...(open && { display: 'none' }),
-                }}
-              >
-                <Menu />
-              </IconButton>
-              <Typography
-                component="h1"
-                variant="h6"
-                color="inherit"
-                noWrap
-                sx={{ flexGrow: 1 }}
-              >
-                {settings.appTitle}
-              </Typography>
-              <FreeSpaceIndicator />
-              <div style={{
-                display: 'flex',
-                alignItems: 'center',
-                flexWrap: 'wrap',
-              }}>
-                <SettingsEthernet />
-                <span>
-                  &nbsp;{isConnected ? settings.serverAddr : 'not connected'}
-                </span>
-              </div>
-            </Toolbar>
-          </AppBar>
-          <Drawer variant="permanent" open={open}>
-            <Toolbar
+      <SocketSubscriber />
+      <Box sx={{ display: 'flex' }}>
+        <CssBaseline />
+        <AppBar position="absolute" open={open}>
+          <Toolbar sx={{ pr: '24px' }}>
+            <IconButton
+              edge="start"
+              color="inherit"
+              aria-label="open drawer"
+              onClick={toggleDrawer}
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                px: [1],
+                marginRight: '36px',
+                ...(open && { display: 'none' }),
               }}
             >
-              <IconButton onClick={toggleDrawer}>
-                <ChevronLeft />
-              </IconButton>
-            </Toolbar>
-            <Divider />
-            <List component="nav">
-              <Link to={'/'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <Dashboard />
-                  </ListItemIcon>
-                  <ListItemText primary="Home" />
-                </ListItemButton>
-              </Link>
-              <Link to={'/archive'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <DownloadIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Archive" />
-                </ListItemButton>
-              </Link>
-              <Link to={'/settings'} style={
-                {
-                  textDecoration: 'none',
-                  color: mode === 'dark' ? '#ffffff' : '#000000DE'
-                }
-              }>
-                <ListItemButton>
-                  <ListItemIcon>
-                    <SettingsIcon />
-                  </ListItemIcon>
-                  <ListItemText primary="Settings" />
-                </ListItemButton>
-              </Link>
-              <ThemeToggler />
-              <Logout />
-            </List>
-          </Drawer>
-          <Box
-            component="main"
+              <Menu />
+            </IconButton>
+            <Typography
+              component="h1"
+              variant="h6"
+              color="inherit"
+              noWrap
+              sx={{ flexGrow: 1 }}
+            >
+              {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}>
+          <Toolbar
             sx={{
-              flexGrow: 1,
-              height: '100vh',
-              overflow: 'auto',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              px: [1],
             }}
           >
-            <Toolbar />
-            <Outlet />
-          </Box>
+            <IconButton onClick={toggleDrawer}>
+              <ChevronLeft />
+            </IconButton>
+          </Toolbar>
+          <Divider />
+          <List component="nav">
+            <Link to={'/'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <Dashboard />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('homeButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/archive'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <DownloadIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('archiveButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/log'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <TerminalIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('logsTitle')} />
+              </ListItemButton>
+            </Link>
+            <Link to={'/settings'} style={
+              {
+                textDecoration: 'none',
+                color: mode === 'dark' ? '#ffffff' : '#000000DE'
+              }
+            }>
+              <ListItemButton>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary={i18n.t('settingsButtonLabel')} />
+              </ListItemButton>
+            </Link>
+            <ThemeToggler />
+            <Logout />
+          </List>
+        </Drawer>
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            height: '100vh',
+            overflow: 'auto',
+          }}
+        >
+          <Toolbar />
+          <Outlet />
         </Box>
-        <Toaster />
-      </SocketSubscriber>
+      </Box>
+      <Toaster />
     </ThemeProvider>
   )
 }

frontend/src/assets/i18n.yaml

@@ -35,11 +35,69 @@ languages:
     playlistCheckbox: Download playlist (it will take time, after submitting you may close this window)
     restartAppMessage: Needs a page reload to take effect
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
+  german:
+    urlInput: Video URL
+    statusTitle: Status
+    statusReady: Bereit
+    selectFormatButton: Format auswählen
+    startButton: Start
+    abortAllButton: Alle Abbrechen
+    updateBinButton: yt-dlp Binärdatei aktualisieren
+    darkThemeButton: Dunkel Modus
+    lightThemeButton: Hell Modus
+    settingsAnchor: Einstellungen
+    serverAddressTitle: Server Adresse
+    serverPortTitle: Port
+    extractAudioCheckbox: Audio extrahieren
+    noMTimeCheckbox: Datei-Änderungszeitpunkt nicht festlegen
+    bgReminder: Sobald Sie diese Seite schließen, wird der Download im Hintergrund fortgesetzt.
+    toastConnected: 'Verbunden mit '
+    toastUpdated: yt-dlp Binärdatei aktualisiert!
+    formatSelectionEnabler: Video/Audio Format auswählbar
+    themeSelect: 'Modus'
+    languageSelect: 'Sprache'
+    overridesAnchor: Überschreibungen
+    pathOverrideOption: Ausgabe-Pfad Überschreibung aktivieren
+    filenameOverrideOption: Ausgabe-Dateiname Überschreibung aktivieren
+    customFilename: Custom filemame (leave blank to use default)
+    customPath: Benutzerdefinierter Pfad
+    customArgs: Benutzerdefinierte yt-dlp Argumente aktivieren (viel Macht = viel Verantwortung)
+    customArgsInput: Benutzerdefinierte yt-dlp Argumente
+    rpcConnErr: Fehler beim Verbinden mit RPC Server
+    splashText: Keine aktiven Downloads
+    archiveTitle: Archiv
+    clipboardAction: URL in Zwischenablage kopiert
+    playlistCheckbox: Playlist herunterladen (es wird einige Zeit dauern, nach dem Absenden können Sie dieses Fenster schließen)
+    restartAppMessage: Erfordert ein Neuladen der Seite, um wirksam zu werden
+    servedFromReverseProxyCheckbox: Ist hinter einem Reverse Proxy Unterordner
+    newDownloadButton: Neuer Download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archiv
+    settingsButtonLabel: Einstellungen
+    rpcAuthenticationLabel: RPC Authentifizierung
+    themeTogglerLabel: Modus Umschalter
+    loadingLabel: Lädt...
+    appTitle: App Titel
+    savedTemplates: Gespeicherte Vorlage
+    templatesEditor: Vorlagen Bearbeiter
+    templatesEditorNameLabel: Vorlagen Name
+    templatesEditorContentLabel: Vorlagen Inhalt
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   french:
     urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
     statusTitle: Statut
@@ -75,11 +133,22 @@ languages:
     playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
     restartAppMessage: Nécessite un rechargement de la page pour prendre effet
     servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
+    notConnectedText: not connected
+    settingsLabel: Settings
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: Nom de l'application
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   italian:
     urlInput: URL Video
     statusTitle: Stato
@@ -113,14 +182,23 @@ languages:
     clipboardAction: URL copiato negli appunti
     playlistCheckbox: Download playlist (richiederà tempo, puoi chiudere la finestra dopo l'inoltro)
     restartAppMessage: La finestra deve essere ricaricata perché abbia effetto
-    servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    servedFromReverseProxyCheckbox: Is behind a reverse proxy
+    newDownloadButton: Nuovo download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: Titolo applicazione
     savedTemplates: Template salvati
     templatesEditor: Editor template
     templatesEditorNameLabel: Nome template
     templatesEditorContentLabel: Contentunto template
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   chinese:
-    urlInput: YouTube 或其他受支持服务的视频网址
+    urlInput: 视频 URL
     statusTitle: 状态
     statusReady: 就绪
     selectFormatButton: 选择格式
@@ -154,11 +232,20 @@ languages:
     playlistCheckbox: 下载播放列表（可能需要一段时间，提交后可以关闭页面等待）
     restartAppMessage: 需要刷新页面才能生效
     servedFromReverseProxyCheckbox: 处于反向代理的子目录后
+    newDownloadButton: 新下载
+    homeButtonLabel: 主页
+    archiveButtonLabel: 归档
+    settingsButtonLabel: 设置
+    rpcAuthenticationLabel: RPC 身份验证
+    themeTogglerLabel: 主题切换
+    loadingLabel: 正在加载…
     appTitle: App 标题
-    savedTemplates: Saved templates
-    templatesEditor: Templates editor
-    templatesEditorNameLabel: Template name
-    templatesEditorContentLabel: Template content
+    savedTemplates: 保存模板
+    templatesEditor: 模板编辑器
+    templatesEditorNameLabel: 模板名称
+    templatesEditorContentLabel: 模板内容
+    logsTitle: '日志'
+    awaitingLogs: '正在等待日志…'
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -192,11 +279,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -230,11 +326,20 @@ languages:
     clipboardAction: URL скопирован в буфер обмена
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -268,11 +373,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -307,11 +421,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -345,11 +468,20 @@ languages:
     clipboardAction: Copied URL to clipboard
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -383,11 +515,20 @@ languages:
     clipboardAction: URL скопійовано в буфер обміну
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -421,8 +562,17 @@ languages:
     clipboardAction: Adres URL zostanie skopiowany do schowka
     playlistCheckbox: Download playlist (it will take time, after submitting you may even close this window)
     servedFromReverseProxyCheckbox: Is behind a reverse proxy subfolder
+    newDownloadButton: New download
+    homeButtonLabel: Home
+    archiveButtonLabel: Archive
+    settingsButtonLabel: Settings
+    rpcAuthenticationLabel: RPC authentication
+    themeTogglerLabel: Theme toggler
+    loadingLabel: Loading...
     appTitle: App title
     savedTemplates: Saved templates
     templatesEditor: Templates editor
     templatesEditorNameLabel: Template name
     templatesEditorContentLabel: Template content
+    logsTitle: 'Logs'
+    awaitingLogs: 'Awaiting logs...'

frontend/src/atoms/downloadTemplate.ts

@@ -47,6 +47,5 @@ export const savedTemplatesState = selector<CustomTemplate[]>({
       either,
       getOrElse(() => new Array<CustomTemplate>())
     )
-  },
-  dangerouslyAllowMutability: true
+  }
 })

frontend/src/atoms/rpc.ts

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

frontend/src/atoms/settings.ts

@@ -12,6 +12,7 @@ export const languages = [
   'catalan',
   'ukrainian',
   'polish',
+  'german'
 ] as const
 
 export type Language = (typeof languages)[number]
@@ -73,7 +74,7 @@ export const serverPortState = atom<number>({
 
 export const latestCliArgumentsState = atom<string>({
   key: 'latestCliArgumentsState',
-  default: localStorage.getItem('cli-args') || '',
+  default: localStorage.getItem('cli-args') || '--no-mtime',
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('cli-args', a.toString()))
@@ -127,7 +128,7 @@ export const listViewState = atom({
 
 export const servedFromReverseProxyState = atom({
   key: 'servedFromReverseProxyState',
-  default: localStorage.getItem('reverseProxy') === "true",
+  default: localStorage.getItem('reverseProxy') === "true" || window.location.port == "",
   effects: [
     ({ onSet }) =>
       onSet(a => localStorage.setItem('reverseProxy', a.toString()))

frontend/src/atoms/status.ts

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

frontend/src/components/CookiesTextField.tsx

@@ -18,49 +18,49 @@ const validateCookie = (cookie: string) => pipe(
   cookie => cookie.replaceAll('\t', ' '),
   cookie => cookie.split(' '),
   E.of,
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f.length === 7,
       () => `missing parts`
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[0].length > 0,
       () => 'missing domain'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[1] === 'TRUE' || f[1] === 'FALSE',
       () => `invalid include subdomains`
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[2].length > 0,
       () => 'invalid path'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[3] === 'TRUE' || f[3] === 'FALSE',
       () => 'invalid secure flag'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => isFinite(Number(f[4])),
       () => 'invalid expiration'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[5].length > 0,
       () => 'invalid name'
     )
   ),
-  E.chain(
+  E.flatMap(
     E.fromPredicate(
       f => f[6].length > 0,
       () => 'invalid value'

frontend/src/components/DownloadCard.tsx

@@ -15,6 +15,7 @@ import {
   Stack,
   Typography
 } from '@mui/material'
+import { useCallback } from 'react'
 import { RPCResult } from '../types'
 import { ellipsis, formatSpeedMiB, mapProcessStatus, roundMiB } from '../utils'
 
@@ -34,11 +35,17 @@ const Resolution: React.FC<{ resolution?: string }> = ({ resolution }) => {
 }
 
 const DownloadCard: React.FC<Props> = ({ download, onStop, onCopy }) => {
-  const isCompleted = () => download.progress.percentage === '-1'
+  const isCompleted = useCallback(
+    () => download.progress.percentage === '-1',
+    [download.progress.percentage]
+  )
 
-  const percentageToNumber = () => isCompleted()
-    ? 100
-    : Number(download.progress.percentage.replace('%', ''))
+  const percentageToNumber = useCallback(
+    () => isCompleted()
+      ? 100
+      : Number(download.progress.percentage.replace('%', '')),
+    [download.progress.percentage, isCompleted]
+  )
 
   return (
     <Card>

frontend/src/components/DownloadDialog.tsx

@@ -22,15 +22,18 @@ import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { TransitionProps } from '@mui/material/transitions'
 import {
+  FC,
+  Suspense,
   forwardRef,
+  useEffect,
   useMemo,
   useRef,
   useState,
   useTransition
 } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { customArgsState, downloadTemplateState, filenameTemplateState } from '../atoms/downloadTemplate'
-import { settingsState } from '../atoms/settings'
+import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+import { latestCliArgumentsState, settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
 import { useI18n } from '../hooks/useI18n'
@@ -55,15 +58,12 @@ type Props = {
   onDownloadStart: (url: string) => void
 }
 
-export default function DownloadDialog({
-  open,
-  onClose,
-  onDownloadStart
-}: Props) {
+const DownloadDialog: FC<Props> = ({ open, onClose, onDownloadStart }) => {
   const settings = useRecoilValue(settingsState)
   const isConnected = useRecoilValue(connectedState)
   const availableDownloadPaths = useRecoilValue(availableDownloadPathsState)
   const downloadTemplate = useRecoilValue(downloadTemplateState)
+  const savedTemplates = useRecoilValue(savedTemplatesState)
 
   const [downloadFormats, setDownloadFormats] = useState<DLMetadata>()
   const [pickedVideoFormat, setPickedVideoFormat] = useState('')
@@ -71,6 +71,8 @@ export default function DownloadDialog({
   const [pickedBestFormat, setPickedBestFormat] = useState('')
 
   const [customArgs, setCustomArgs] = useRecoilState(customArgsState)
+  const [, setCliArgs] = useRecoilState(latestCliArgumentsState)
+
   const [downloadPath, setDownloadPath] = useState('')
 
   const [filenameTemplate, setFilenameTemplate] = useRecoilState(
@@ -82,7 +84,7 @@ export default function DownloadDialog({
 
   const [isPlaylist, setIsPlaylist] = useState(false)
 
-  const cliArgs = useMemo(() =>
+  const argsBuilder = useMemo(() =>
     new CliArguments().fromString(settings.cliArgs), [settings.cliArgs]
   )
 
@@ -94,6 +96,10 @@ export default function DownloadDialog({
 
   const [isPending, startTransition] = useTransition()
 
+  useEffect(() => {
+    setCustomArgs('')
+  }, [open])
+
   /**
     * Retrive url from input, cli-arguments from checkboxes and emits via WebSocket
   */
@@ -105,7 +111,7 @@ export default function DownloadDialog({
 
     client.download({
       url: immediate || url || workingUrl,
-      args: `${cliArgs.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
+      args: `${argsBuilder.toString()} ${toFormatArgs(codes)} ${downloadTemplate}`,
       pathOverride: downloadPath ?? '',
       renameTo: settings.fileRenaming ? filenameTemplate : '',
       playlist: isPlaylist,
@@ -117,7 +123,7 @@ export default function DownloadDialog({
     setTimeout(() => {
       resetInput()
       setDownloadFormats(undefined)
-      onDownloadStart(url)
+      onDownloadStart(immediate || url || workingUrl)
     }, 250)
   }
 
@@ -309,8 +315,32 @@ export default function DownloadDialog({
                     </Grid>
                   }
                 </Grid>
-                <ExtraDownloadOptions />
+                <Suspense>
+                  {savedTemplates.length > 0 && <ExtraDownloadOptions />}
+                </Suspense>
                 <Grid container spacing={1} pt={2} justifyContent="space-between">
+                  <Grid item>
+                    <Grid item>
+                      <FormControlLabel
+                        control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
+                        checked={isPlaylist}
+                        label={i18n.t('playlistCheckbox')}
+                      />
+                    </Grid>
+                    <Grid item>
+                      <FormControlLabel
+                        control={
+                          <Checkbox
+                            onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                          />
+                        }
+                        checked={argsBuilder.extractAudio}
+                        onChange={() => setCliArgs(argsBuilder.toggleExtractAudio().toString())}
+                        disabled={settings.formatSelection}
+                        label={i18n.t('extractAudioCheckbox')}
+                      />
+                    </Grid>
+                  </Grid>
                   <Grid item>
                     <Button
                       variant="contained"
@@ -327,13 +357,6 @@ export default function DownloadDialog({
                       }
                     </Button>
                   </Grid>
-                  <Grid item>
-                    <FormControlLabel
-                      control={<Checkbox onChange={() => setIsPlaylist(state => !state)} />}
-                      checked={isPlaylist}
-                      label={i18n.t('playlistCheckbox')}
-                    />
-                  </Grid>
                 </Grid>
               </Paper>
             </Grid>
@@ -368,4 +391,6 @@ export default function DownloadDialog({
       </Box>
     </Dialog>
   )
-}
+}
+
+export default DownloadDialog

frontend/src/components/DownloadsCardView.tsx

@@ -20,13 +20,11 @@ const DownloadsCardView: React.FC = () => {
       {
         downloads.map(download => (
           <Grid item xs={4} sm={8} md={6} key={download.id}>
-            <>
-              <DownloadCard
-                download={download}
-                onStop={() => abort(download.id)}
-                onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
-              />
-            </>
+            <DownloadCard
+              download={download}
+              onStop={() => abort(download.id)}
+              onCopy={() => pushMessage(i18n.t('clipboardAction'), 'info')}
+            />
           </Grid>
         ))
       }

frontend/src/components/DownloadsListView.tsx

@@ -27,9 +27,14 @@ const DownloadsListView: React.FC = () => {
   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}>
+        <TableContainer
+          component={Paper}
+          sx={{ minHeight: '100%' }}
+          elevation={2}
+          hidden={downloads.length === 0}
+        >
           <Table>
-            <TableHead hidden={downloads.length === 0}>
+            <TableHead>
               <TableRow>
                 <TableCell>
                   <Typography fontWeight={500} fontSize={15}>Title</Typography>

frontend/src/components/ExtraDownloadOptions.tsx

@@ -22,9 +22,23 @@ const ExtraDownloadOptions: React.FC = () => {
         renderOption={(props, option) => (
           <Box
             component="li"
-            sx={{ mr: 2, flexShrink: 0 }}
-            {...props}>
-            {option.label}
+            {...props}
+          >
+            <Box sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignContent: 'flex-start',
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+              width: '100%'
+            }}>
+              <Typography>
+                {option.label}
+              </Typography>
+              <Typography variant="subtitle2" color="primary">
+                {option.content}
+              </Typography>
+            </Box>
           </Box>
         )}
         sx={{ width: '100%', mt: 2 }}

frontend/src/components/FreeSpaceIndicator.tsx

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

frontend/src/components/HomeActions.tsx

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

frontend/src/components/HomeSpeedDial.tsx

@@ -48,7 +48,7 @@ const HomeSpeedDial: React.FC<Props> = ({ onDownloadOpen, onEditorOpen }) => {
       />
       <SpeedDialAction
         icon={<AddCircleIcon />}
-        tooltipTitle={i18n.t('newDownload')}
+        tooltipTitle={i18n.t('newDownloadButton')}
         onClick={onDownloadOpen}
       />
     </SpeedDial>

frontend/src/components/LogTerminal.tsx

@@ -0,0 +1,91 @@
+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'
+import { useI18n } from '../hooks/useI18n'
+
+const token = localStorage.getItem('token')
+
+const LogTerminal: React.FC = () => {
+  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]
+  )
+
+  useEffect(() => {
+    eventSource.addEventListener('log', event => {
+      const msg: string[] = JSON.parse(event.data)
+      setLogBuffer(buff => [...buff, ...msg].slice(-100))
+
+      boxRef.current?.scrollTo(0, boxRef.current.scrollHeight)
+    })
+
+    // TODO: in dev mode it breaks sse
+    return () => eventSource.close()
+  }, [eventSource])
+
+  const logEntryStyle = (data: string) => {
+    if (data.includes("level=ERROR")) {
+      return { color: 'red' }
+    }
+    if (data.includes("level=WARN")) {
+      return { color: 'orange' }
+    }
+    return {}
+  }
+
+  return (
+    <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 >
+  )
+}
+
+export default LogTerminal

frontend/src/components/Logout.tsx

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

frontend/src/components/SocketSubscriber.tsx

@@ -1,7 +1,8 @@
 import * as O from 'fp-ts/Option'
 import { useEffect, useMemo } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { share, take, timer } from 'rxjs'
+import { take, timer } from 'rxjs'
 import { downloadsState } from '../atoms/downloads'
 import { serverAddressAndPortState } from '../atoms/settings'
 import { connectedState } from '../atoms/status'
@@ -13,7 +14,7 @@ import { datetimeCompareFunc, isRPCResponse } from '../utils'
 
 interface Props extends React.HTMLAttributes<HTMLBaseElement> { }
 
-const SocketSubscriber: React.FC<Props> = ({ children }) => {
+const SocketSubscriber: React.FC<Props> = () => {
   const [connected, setIsConnected] = useRecoilState(connectedState)
   const [, setDownloads] = useRecoilState(downloadsState)
 
@@ -23,19 +24,24 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
   const { client } = useRPC()
   const { pushMessage } = useToast()
 
-  const sharedSocket$ = useMemo(() => client.socket$.pipe(share()), [])
-  const socketOnce$ = useMemo(() => sharedSocket$.pipe(take(1)), [])
+  const navigate = useNavigate()
 
-  useSubscription(socketOnce$, () => {
-    setIsConnected(true)
-    pushMessage(
-      `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
-      "success"
-    )
-  })
+  const socketOnce$ = useMemo(() => client.socket$.pipe(take(1)), [])
+
+  useEffect(() => {
+    if (!connected) {
+      socketOnce$.subscribe(() => {
+        setIsConnected(true)
+        pushMessage(
+          `${i18n.t('toastConnected')} (${serverAddressAndPort})`,
+          "success"
+        )
+      })
+    }
+  }, [connected])
 
   useSubscription(
-    sharedSocket$,
+    client.socket$,
     event => {
       if (!isRPCResponse(event)) { return }
       if (!Array.isArray(event.result)) { return }
@@ -50,7 +56,6 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
           )
         )
       }
-
       setDownloads(O.none)
     },
     err => {
@@ -58,19 +63,20 @@ const SocketSubscriber: React.FC<Props> = ({ children }) => {
       pushMessage(
         `${i18n.t('rpcConnErr')} (${serverAddressAndPort})`,
         "error"
-      )
+      ),
+        navigate(`/error`)
     }
   )
 
   useEffect(() => {
     if (connected) {
-      timer(0, 1000).subscribe(() => client.running())
-    }
-  }, [connected])
+      const sub = timer(0, 1000).subscribe(() => client.running())
 
-  return (
-    <>{children}</>
-  )
+      return () => sub.unsubscribe()
+    }
+  }, [connected, client])
+
+  return null
 }
 
 export default SocketSubscriber

frontend/src/components/Splash.tsx

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

frontend/src/components/ThemeToggler.tsx

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

frontend/src/index.tsx

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

frontend/src/lib/argsParser.ts

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

frontend/src/lib/httpClient.ts

@@ -7,7 +7,7 @@ export const ffetch = <T>(url: string, opt?: RequestInit) => tryCatch(
 
 
 const fetcher = async <T>(url: string, opt?: RequestInit) => {
-  const res = await fetch(url, opt)
+  const jwt = localStorage.getItem('token')
 
   if (opt && !opt.headers) {
     opt.headers = {
@@ -15,6 +15,14 @@ const fetcher = async <T>(url: string, opt?: RequestInit) => {
     }
   }
 
+  const res = await fetch(url, {
+    ...opt,
+    headers: {
+      ...opt?.headers,
+      'X-Authentication': jwt ?? ''
+    }
+  })
+
   if (!res.ok) {
     throw await res.text()
   }

frontend/src/lib/intl.ts

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

frontend/src/lib/rpcClient.ts

@@ -15,15 +15,19 @@ export class RPCClient {
   private seq: number
   private httpEndpoint: string
   private readonly _socket$: WebSocketSubject<any>
+  private readonly token?: string
 
-  constructor(httpEndpoint: string, webSocketEndpoint: string) {
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
     this.seq = 0
     this.httpEndpoint = httpEndpoint
-    this._socket$ = webSocket<any>(webSocketEndpoint)
+    this._socket$ = webSocket<any>({
+      url: token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    })
+    this.token = token
   }
 
   public get socket$(): Observable<RPCResponse<RPCResult[]>> {
-    return this._socket$.asObservable()
+    return this._socket$
   }
 
   private incrementSeq() {
@@ -47,6 +51,9 @@ export class RPCClient {
   private async sendHTTP<T>(req: RPCRequest) {
     const res = await fetch(this.httpEndpoint, {
       method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
       body: JSON.stringify({
         ...req,
         id: this.incrementSeq(),

frontend/src/router.tsx

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

frontend/src/views/Archive.tsx

@@ -14,6 +14,8 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
+  MenuItem,
+  MenuList,
   Paper,
   SpeedDial,
   SpeedDialAction,
@@ -26,6 +28,7 @@ import FolderIcon from '@mui/icons-material/Folder'
 import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'
 import VideoFileIcon from '@mui/icons-material/VideoFile'
 
+import DownloadIcon from '@mui/icons-material/Download'
 import { matchW } from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { useEffect, useMemo, useState, useTransition } from 'react'
@@ -37,10 +40,14 @@ import { useObservable } from '../hooks/observable'
 import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { ffetch } from '../lib/httpClient'
-import { DeleteRequest, DirectoryEntry } from '../types'
+import { DirectoryEntry } from '../types'
 import { base64URLEncode, roundMiB } from '../utils'
 
 export default function Downloaded() {
+  const [menuPos, setMenuPos] = useState({ x: 0, y: 0 })
+  const [showMenu, setShowMenu] = useState(false)
+  const [currentFile, setCurrentFile] = useState<DirectoryEntry>()
+
   const serverAddr = useRecoilValue(serverURL)
   const navigate = useNavigate()
 
@@ -69,7 +76,7 @@ export default function Downloaded() {
         pushMessage(e, 'error')
         navigate('/login')
       },
-      (d) => files$.next(d),
+      (d) => files$.next(d ?? []),
     )
   )()
 
@@ -108,8 +115,8 @@ export default function Downloaded() {
             path: upperLevel,
             shaSum: '',
             size: 0,
-          }, ...r]
-          : r
+          }, ...r.filter(f => f.name !== '')]
+          : r.filter(f => f.name !== '')
         )
       )
     )()
@@ -132,19 +139,24 @@ export default function Downloaded() {
       : selected$.next([...selected$.value, name])
   }
 
+  const deleteFile = (entry: DirectoryEntry) => pipe(
+    ffetch(`${serverAddr}/archive/delete`, {
+      method: 'POST',
+      body: JSON.stringify({
+        path: entry.path,
+        shaSum: entry.shaSum,
+      })
+    }),
+    matchW(
+      (l) => pushMessage(l, 'error'),
+      (_) => fetcher()
+    )
+  )()
+
   const deleteSelected = () => {
     Promise.all(selectable
       .filter(entry => entry.selected)
-      .map(entry => fetch(`${serverAddr}/archive/delete`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          path: entry.path,
-          shaSum: entry.shaSum,
-        } as DeleteRequest)
-      }))
+      .map(deleteFile)
     ).then(fetcher)
   }
 
@@ -155,7 +167,13 @@ export default function Downloaded() {
   const onFileClick = (path: string) => startTransition(() => {
     const encoded = base64URLEncode(path)
 
-    window.open(`${serverAddr}/archive/d/${encoded}`)
+    window.open(`${serverAddr}/archive/v/${encoded}?token=${localStorage.getItem('token')}`)
+  })
+
+  const downloadFile = (path: string) => startTransition(() => {
+    const encoded = base64URLEncode(path)
+
+    window.open(`${serverAddr}/archive/d/${encoded}?token=${localStorage.getItem('token')}`)
   })
 
   const onFolderClick = (path: string) => startTransition(() => {
@@ -163,18 +181,42 @@ export default function Downloaded() {
   })
 
   return (
-    <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
+    <Container
+      maxWidth="lg"
+      sx={{ mt: 4, mb: 4, height: '100%' }}
+      onClick={() => setShowMenu(false)}
+    >
+      <IconMenu
+        posX={menuPos.x}
+        posY={menuPos.y}
+        hide={!showMenu}
+        onDownload={() => {
+          if (currentFile) {
+            downloadFile(currentFile?.path)
+            setCurrentFile(undefined)
+          }
+        }}
+        onDelete={() => {
+          if (currentFile) {
+            deleteFile(currentFile)
+            setCurrentFile(undefined)
+          }
+        }}
+      />
       <Backdrop
         sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
         open={!(files$.observed) || isPending}
       >
         <CircularProgress color="primary" />
       </Backdrop>
-      <Paper sx={{
-        p: 2,
-        display: 'flex',
-        flexDirection: 'column',
-      }}>
+      <Paper
+        sx={{
+          p: 2,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={() => setShowMenu(false)}
+      >
         <Typography py={1} variant="h5" color="primary">
           {i18n.t('archiveTitle')}
         </Typography>
@@ -182,6 +224,12 @@ export default function Downloaded() {
           {selectable.length === 0 && 'No files found'}
           {selectable.map((file, idx) => (
             <ListItem
+              onContextMenu={(e) => {
+                e.preventDefault()
+                setCurrentFile(file)
+                setMenuPos({ x: e.clientX, y: e.clientY })
+                setShowMenu(true)
+              }}
               key={idx}
               secondaryAction={
                 <div>
@@ -192,11 +240,13 @@ export default function Downloaded() {
                     {roundMiB(file.size)}
                   </Typography>
                   }
-                  {!file.isDirectory && <Checkbox
-                    edge="end"
-                    checked={file.selected}
-                    onChange={() => addSelected(file.name)}
-                  />}
+                  {!file.isDirectory && <>
+                    <Checkbox
+                      edge="end"
+                      checked={file.selected}
+                      onChange={() => addSelected(file.name)}
+                    />
+                  </>}
                 </div>
               }
               disablePadding
@@ -257,11 +307,15 @@ export default function Downloaded() {
           </ul>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setOpenDialog(false)}>Cancel</Button>
-          <Button onClick={() => {
-            deleteSelected()
-            setOpenDialog(false)
-          }} autoFocus
+          <Button onClick={() => setOpenDialog(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              deleteSelected()
+              setOpenDialog(false)
+            }}
+            autoFocus
           >
             Ok
           </Button>
@@ -269,4 +323,43 @@ export default function Downloaded() {
       </Dialog>
     </Container>
   )
+}
+
+const IconMenu: React.FC<{
+  posX: number
+  posY: number
+  hide: boolean
+  onDownload: () => void
+  onDelete: () => void
+}> = ({ posX, posY, hide, onDelete, onDownload }) => {
+  return (
+    <Paper sx={{
+      width: 320,
+      maxWidth: '100%',
+      position: 'absolute',
+      top: posY,
+      left: posX,
+      display: hide ? 'none' : 'block',
+      zIndex: (theme) => theme.zIndex.drawer + 1,
+    }}>
+      <MenuList>
+        <MenuItem onClick={onDownload}>
+          <ListItemIcon>
+            <DownloadIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Download
+          </ListItemText>
+        </MenuItem>
+        <MenuItem onClick={onDelete}>
+          <ListItemIcon>
+            <DeleteForeverIcon fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>
+            Delete
+          </ListItemText>
+        </MenuItem>
+      </MenuList>
+    </Paper>
+  )
 }

frontend/src/views/Login.tsx

@@ -54,7 +54,7 @@ export default function Login() {
   }
 
   const login = async () => {
-    const task = ffetch(`${url}/auth/login`, {
+    const task = ffetch<string>(`${url}/auth/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
@@ -63,17 +63,20 @@ export default function Login() {
         username,
         password,
       }),
-      redirect: 'follow'
     })
 
     pipe(
       task,
       matchW(
-        (l) => {
+        (error) => {
           setFormHasError(true)
-          pushMessage(l, 'error')
+          pushMessage(error, 'error')
         },
-        () => navigateAndReload()
+        (token) => {
+          console.log(token)
+          localStorage.setItem('token', token)
+          navigateAndReload()
+        }
       )
     )()
   }

frontend/src/views/Terminal.tsx

@@ -0,0 +1,9 @@
+import LogTerminal from '../components/LogTerminal'
+
+const Terminal: React.FC = () => {
+  return (
+    <LogTerminal />
+  )
+}
+
+export default Terminal

frontend/vite.config.ts

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

go.mod

@@ -3,32 +3,41 @@ module github.com/marcopeocchi/yt-dlp-web-ui
 go 1.20
 
 require (
-	github.com/go-chi/chi/v5 v5.0.10
+	github.com/go-chi/chi/v5 v5.0.11
 	github.com/go-chi/cors v1.2.1
-	github.com/golang-jwt/jwt/v5 v5.0.0
-	github.com/google/uuid v1.3.1
-	github.com/gorilla/websocket v1.5.0
+	github.com/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
-	golang.org/x/sys v0.13.0
+	github.com/reactivex/rxgo/v2 v2.5.0
+	golang.org/x/sys v0.15.0
 	gopkg.in/yaml.v3 v3.0.1
+	modernc.org/sqlite v1.28.0
 )
 
 require (
+	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.12.0 // indirect
 	github.com/kballard/go-shellquote v0.0.0-20180428030007-95032a82bc51 // indirect
-	github.com/mattn/go-isatty v0.0.16 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	golang.org/x/mod v0.3.0 // indirect
-	golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 // indirect
-	golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 // indirect
-	lukechampine.com/uint128 v1.2.0 // indirect
-	modernc.org/cc/v3 v3.40.0 // indirect
-	modernc.org/ccgo/v3 v3.16.13 // indirect
-	modernc.org/libc v1.24.1 // indirect
-	modernc.org/mathutil v1.5.0 // indirect
-	modernc.org/memory v1.6.0 // indirect
+	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/sqlite v1.26.0 // indirect
-	modernc.org/strutil v1.1.3 // indirect
-	modernc.org/token v1.0.1 // indirect
+	modernc.org/strutil v1.2.0 // indirect
+	modernc.org/token v1.1.0 // indirect
 )

go.sum

@@ -1,72 +1,100 @@
+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/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/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
-github.com/go-chi/chi/v5 v5.0.10 h1:rLz5avzKpjqxrYwXNfmjkrYYXOyLJd37pz53UFHC6vk=
-github.com/go-chi/chi/v5 v5.0.10/go.mod h1:DslCQbL2OYiznFReuXYUmQ2hGd1aDpCnlMNITLSKoi8=
+github.com/emirpasic/gods v1.12.0 h1:QAUIPSaCu4G+POclxeqb3F+WPpdKqFGlw36+yOzGlrg=
+github.com/emirpasic/gods v1.12.0/go.mod h1:YfzfFFoVP/catgzJb4IKIqXjX78Ha8FMSDh3ymbK86o=
+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.0.0 h1:1n1XNM9hk7O9mnQoNBGolZvzebBQ7p93ULHRc28XJUE=
-github.com/golang-jwt/jwt/v5 v5.0.0/go.mod h1:pqrtFR0X4osieyHYxtmOUWsAWrfe1Q5UVIyoH402zdk=
-github.com/google/uuid v1.3.1 h1:KjJaJ9iWZ3jOFZIf1Lqf4laDRCasjl0BCmnEGxkdLb4=
-github.com/google/uuid v1.3.1/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
-github.com/gorilla/websocket v1.5.0 h1:PPwGk2jz7EePpoHN/+ClbZu8SPxiqlu12wZP/3sWmnc=
-github.com/gorilla/websocket v1.5.0/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
+github.com/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/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/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.16 h1:bq3VjFmv/sOjHtdEhmkEV4x1AJtvUvOJ2PFAZ5+peKQ=
-github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
-github.com/remyoudompheng/bigfft v0.0.0-20200410134404-eec4a21b6bb0/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/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.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/yuin/goldmark v1.2.1/go.mod h1:3hX8gzYuyVAZsxl0MRgGTJEmQBFcNTphYh9decYSb74=
+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/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/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=
+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/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8UmvKecakEJjdnWj3jj499lnFckfCI=
-golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
-golang.org/x/mod v0.3.0 h1:RM4zey1++hCTbCVQfnWeKs9/IEsaBLA8vTkd0WVtmH4=
-golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
-golang.org/x/net v0.0.0-20190404232315-eb5bcb51f2a3/go.mod h1:t9HGtf8HONx5eT2rtn7q6eTqICYqUVnKs3thJo3Qplg=
+golang.org/x/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.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.0.0-20201021035429-f5854403a974/go.mod h1:sp8m0HH+o8qH0wwXwYZr8TS3Oi6o0r6Gce1SSxlDquU=
+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-20201020160332-67f06af15bc9/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.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.0.0-20190412213103-97732733099d/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20200930185726-fdedc70b468f/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
-golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.13.0 h1:Af8nKPmuFypiUBjVoU9V20FiaFXOcuZI21p0ycVYYGE=
-golang.org/x/sys v0.13.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+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/text v0.3.3/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
-golang.org/x/tools v0.0.0-20191119224855-298f0cb1881e/go.mod h1:b+2E5dAYhXwXZwtnZ6UAqBI28+e2cm9otk0dWdXHAEo=
-golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78 h1:M8tBwCtWD/cZV9DZpFYRUgaymAYAr+aIUTWzDaM3uPs=
-golang.org/x/tools v0.0.0-20201124115921-2c860bdd6e78/go.mod h1:emZCQorbCU4vsT4fOWvOPXz4eW1wZW4PmDk9uLelYpA=
+golang.org/x/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.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=
-golang.org/x/xerrors v0.0.0-20191011141410-1b5146add898/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1 h1:go1bK/D/BFZV2I8cIQd1NKEZ+0owSTG1fDTci4IqFcE=
-golang.org/x/xerrors v0.0.0-20200804184101-5ec99f83aff1/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
-gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/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=
-lukechampine.com/uint128 v1.2.0 h1:mBi/5l91vocEN8otkC5bDLhi2KdCticRiwbdB0O+rjI=
-lukechampine.com/uint128 v1.2.0/go.mod h1:c4eWIwlEGaxC/+H1VguhU4PHXNWDCDMUlWdIWl2j1gk=
-modernc.org/cc/v3 v3.40.0 h1:P3g79IUS/93SYhtoeaHW+kRCIrYaxJ27MFPv+7kaTOw=
-modernc.org/cc/v3 v3.40.0/go.mod h1:/bTg4dnWkSXowUO6ssQKnOV0yMVxDYNIsIrzqTFDGH0=
-modernc.org/ccgo/v3 v3.16.13 h1:Mkgdzl46i5F/CNR/Kj80Ri59hC8TKAhZrYSaqvkwzUw=
-modernc.org/ccgo/v3 v3.16.13/go.mod h1:2Quk+5YgpImhPjv2Qsob1DnZ/4som1lJTodubIcoUkY=
-modernc.org/libc v1.24.1 h1:uvJSeCKL/AgzBo2yYIPPTy82v21KgGnizcGYfBHaNuM=
-modernc.org/libc v1.24.1/go.mod h1:FmfO1RLrU3MHJfyi9eYYmZBfi/R+tqZ6+hQ3yQQUkak=
-modernc.org/mathutil v1.5.0 h1:rV0Ko/6SfM+8G+yKiyI830l3Wuz1zRutdslNoQ0kfiQ=
-modernc.org/mathutil v1.5.0/go.mod h1:mZW8CKdRPY1v87qxC/wUdX5O1qDzXMP5TH3wjfpga6E=
-modernc.org/memory v1.6.0 h1:i6mzavxrE9a30whzMfwf7XWVODx2r5OYXvU46cirX7o=
-modernc.org/memory v1.6.0/go.mod h1:PkUhL0Mugw21sHPeskwZW4D6VscE/GQJOnIpCnW6pSU=
+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/sqlite v1.26.0 h1:SocQdLRSYlA8W99V8YH0NES75thx19d9sB/aFc4R8Lw=
-modernc.org/sqlite v1.26.0/go.mod h1:FL3pVXie73rg3Rii6V/u5BoHlSoyeZeIgKZEgHARyCU=
-modernc.org/strutil v1.1.3 h1:fNMm+oJklMGYfU9Ylcywl0CO5O6nTfaowNsh2wpPjzY=
-modernc.org/strutil v1.1.3/go.mod h1:MEHNA7PdEnEwLvspRMtWTNnp2nnyvMfkimT1NKNAGbw=
-modernc.org/token v1.0.1 h1:A3qvTqOwexpfZZeyI0FeGPDlSWX5pjZu9hF4lU+EKWg=
-modernc.org/token v1.0.1/go.mod h1:UGzOrNV1mAFSEB63lOFHIpNRUVMvYTc6yu1SMY/XTDM=
+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

@@ -14,6 +14,7 @@ import (
 )
 
 var (
+	host              string
 	port              int
 	queueSize         int
 	configFile        string
@@ -36,6 +37,7 @@ var (
 
 func init() {
 
+	flag.StringVar(&host, "host", "0.0.0.0", "Host where server will listen at")
 	flag.IntVar(&port, "port", 3033, "Port where server will listen at")
 	flag.IntVar(&queueSize, "qs", runtime.NumCPU(), "Download queue size")
 
@@ -61,6 +63,7 @@ func main() {
 
 	c := config.Instance()
 
+	c.Host = host
 	c.Port = port
 	c.QueueSize = queueSize
 	c.DownloadPath = downloadPath
@@ -73,8 +76,8 @@ func main() {
 
 	// 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, "no config file found")
+		log.Println(cli.BgRed, "config", cli.Reset, err)
 	}
 
-	server.RunBlocking(port, frontend, localDatabasePath)
+	server.RunBlocking(c.Host, c.Port, frontend, localDatabasePath)
 }

server/config/parser.go

@@ -8,6 +8,9 @@ import (
 )
 
 type Config struct {
+	CurrentLogFile  string
+	LogPath         string `yaml:"log_path"`
+	Host            string `yaml:"host"`
 	Port            int    `yaml:"port"`
 	DownloadPath    string `yaml:"downloadPath"`
 	DownloaderPath  string `yaml:"downloaderPath"`

server/handlers/archive.go

@@ -3,6 +3,7 @@ package handlers
 import (
 	"encoding/base64"
 	"encoding/json"
+	"io"
 	"net/http"
 	"net/url"
 	"os"
@@ -20,20 +21,19 @@ type DirectoryEntry struct {
 	Name        string    `json:"name"`
 	Path        string    `json:"path"`
 	Size        int64     `json:"size"`
-	SHASum      string    `json:"shaSum"`
 	ModTime     time.Time `json:"modTime"`
 	IsVideo     bool      `json:"isVideo"`
 	IsDirectory bool      `json:"isDirectory"`
 }
 
 func walkDir(root string) (*[]DirectoryEntry, error) {
-	files := []DirectoryEntry{}
-
 	dirs, err := os.ReadDir(root)
 	if err != nil {
 		return nil, err
 	}
 
+	var files []DirectoryEntry
+
 	for _, d := range dirs {
 		if !utils.IsValidEntry(d) {
 			continue
@@ -50,7 +50,6 @@ func walkDir(root string) (*[]DirectoryEntry, error) {
 			Path:        path,
 			Name:        d.Name(),
 			Size:        info.Size(),
-			SHASum:      utils.ShaSumString(path),
 			IsVideo:     utils.IsVideo(d),
 			IsDirectory: d.IsDir(),
 			ModTime:     info.ModTime(),
@@ -69,8 +68,7 @@ func ListDownloaded(w http.ResponseWriter, r *http.Request) {
 	root := config.Instance().DownloadPath
 	req := new(ListRequest)
 
-	err := json.NewDecoder(r.Body).Decode(&req)
-	if err != nil {
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
@@ -88,9 +86,8 @@ func ListDownloaded(w http.ResponseWriter, r *http.Request) {
 	}
 
 	w.WriteHeader(http.StatusOK)
-	err = json.NewEncoder(w).Encode(files)
 
-	if err != nil {
+	if err := json.NewEncoder(w).Encode(files); err != nil {
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 	}
 }
@@ -100,21 +97,13 @@ type DeleteRequest = DirectoryEntry
 func DeleteFile(w http.ResponseWriter, r *http.Request) {
 	req := new(DeleteRequest)
 
-	err := json.NewDecoder(r.Body).Decode(&req)
-	if err != nil {
+	if err := json.NewDecoder(r.Body).Decode(&req); err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
-	sum := utils.ShaSumString(req.Path)
-	if sum != req.SHASum {
-		http.Error(w, "shasum mismatch", http.StatusBadRequest)
-		return
-	}
-
-	err = os.Remove(req.Path)
-	if err != nil {
-		http.Error(w, "shasum mismatch", http.StatusBadRequest)
+	if err := os.Remove(req.Path); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
 		return
 	}
 
@@ -142,18 +131,60 @@ func SendFile(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	decodedStr := string(decoded)
+	filename := string(decoded)
 
 	root := config.Instance().DownloadPath
 
 	// TODO: further path / file validations
-	if strings.Contains(filepath.Dir(decodedStr), root) {
-		w.Header().Add(
-			"Content-Disposition",
-			"inline; filename="+filepath.Base(decodedStr),
-		)
-
-		http.ServeFile(w, r, decodedStr)
+	if strings.Contains(filepath.Dir(filename), root) {
+		http.ServeFile(w, r, filename)
+		return
+	}
+
+	w.WriteHeader(http.StatusUnauthorized)
+}
+
+func DownloadFile(w http.ResponseWriter, r *http.Request) {
+	path := chi.URLParam(r, "id")
+
+	if path == "" {
+		http.Error(w, "inexistent path", http.StatusBadRequest)
+		return
+	}
+
+	path, err := url.QueryUnescape(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	decoded, err := base64.StdEncoding.DecodeString(path)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		return
+	}
+
+	filename := string(decoded)
+
+	root := config.Instance().DownloadPath
+
+	if strings.Contains(filepath.Dir(filename), root) {
+		w.Header().Add(
+			"Content-Disposition",
+			"inline; filename="+filepath.Base(filename),
+		)
+		w.Header().Set(
+			"Content-Type",
+			"application/octet-stream",
+		)
+
+		fd, err := os.Open(filename)
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		io.Copy(w, fd)
 	}
 
 	w.WriteHeader(http.StatusUnauthorized)

server/handlers/login.go

@@ -30,7 +30,7 @@ func Login(w http.ResponseWriter, r *http.Request) {
 	)
 
 	if username != req.Username || password != req.Password {
-		http.Error(w, err.Error(), http.StatusBadRequest)
+		http.Error(w, "invalid username or password", http.StatusBadRequest)
 		return
 	}
 
@@ -47,16 +47,10 @@ func Login(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	cookie := &http.Cookie{
-		Name:     utils.TOKEN_COOKIE_NAME,
-		HttpOnly: true,
-		Secure:   false,
-		Expires:  expiresAt, // 30 days
-		Value:    tokenString,
-		Path:     "/",
+	if err := json.NewEncoder(w).Encode(tokenString); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
 	}
-
-	http.SetCookie(w, cookie)
 }
 
 func Logout(w http.ResponseWriter, r *http.Request) {

server/internal/memory_db.go

@@ -4,13 +4,12 @@ import (
 	"encoding/gob"
 	"errors"
 	"fmt"
-	"log"
+	"log/slog"
 	"os"
 	"path/filepath"
 	"sync"
 
 	"github.com/google/uuid"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/cli"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
@@ -94,14 +93,14 @@ func (m *MemoryDB) All() *[]ProcessResponse {
 }
 
 // WIP: Persist the database in a single file named "session.dat"
-func (m *MemoryDB) Persist() {
+func (m *MemoryDB) Persist() error {
 	running := m.All()
 
 	sf := filepath.Join(config.Instance().SessionFilePath, "session.dat")
 
 	fd, err := os.Create(sf)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
 	session := Session{
@@ -110,14 +109,14 @@ func (m *MemoryDB) Persist() {
 
 	err = gob.NewEncoder(fd).Encode(session)
 	if err != nil {
-		log.Println(cli.Red, "Failed to persist session", cli.Reset)
+		return errors.Join(errors.New("failed to persist session"), err)
 	}
 
-	log.Println(cli.BgBlue, "Successfully serialized session", cli.Reset)
+	return nil
 }
 
 // WIP: Restore a persisted state
-func (m *MemoryDB) Restore() {
+func (m *MemoryDB) Restore(logger *slog.Logger) {
 	fd, err := os.Open("session.dat")
 	if err != nil {
 		return
@@ -138,6 +137,7 @@ func (m *MemoryDB) Restore() {
 			Progress: proc.Progress,
 			Output:   proc.Output,
 			Params:   proc.Params,
+			Logger:   logger,
 		}
 
 		m.table.Store(proc.Id, restored)
@@ -146,6 +146,4 @@ func (m *MemoryDB) Restore() {
 			go restored.Start()
 		}
 	}
-
-	log.Println(cli.BgGreen, "Successfully restored session", cli.Reset)
 }

server/internal/message_queue.go

@@ -1,8 +1,6 @@
 package internal
 
 import (
-	"log"
-
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 )
 
@@ -19,7 +17,7 @@ func NewMessageQueue() *MessageQueue {
 	size := config.Instance().QueueSize
 
 	if size <= 0 {
-		log.Fatalln("invalid queue size")
+		panic("invalid queue size")
 	}
 
 	return &MessageQueue{

server/internal/playlist.go

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

server/internal/process.go

@@ -4,6 +4,7 @@ import (
 	"bufio"
 	"encoding/json"
 	"fmt"
+	"log/slog"
 	"regexp"
 	"sync"
 	"syscall"
@@ -50,6 +51,7 @@ type Process struct {
 	Progress DownloadProgress
 	Output   DownloadOutput
 	proc     *os.Process
+	Logger   *slog.Logger
 }
 
 type DownloadOutput struct {
@@ -84,19 +86,27 @@ func (p *Process) Start() {
 	}
 
 	if p.Output.Filename != "" {
-		out.Filename = p.Output.Filename + ".%(ext)s"
+		out.Filename = p.Output.Filename
 	}
 
-	params := append([]string{
+	buildFilename(&p.Output)
+
+	params := []string{
 		strings.Split(p.Url, "?list")[0], //no playlist
 		"--newline",
 		"--no-colors",
 		"--no-playlist",
 		"--progress-template",
 		strings.NewReplacer("\n", "", "\t", "", " ", "").Replace(template),
-		"-o",
-		fmt.Sprintf("%s/%s", out.Path, out.Filename),
-	}, p.Params...)
+	}
+
+	// if user asked to manually override the output path...
+	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(params, p.Params...)
 
 	// ----------------- main block ----------------- //
 	cmd := exec.Command(config.Instance().DownloaderPath, params...)
@@ -104,13 +114,21 @@ func (p *Process) Start() {
 
 	r, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Panicln(err)
+		p.Logger.Error(
+			"failed to connect to stdout",
+			slog.String("err", err.Error()),
+		)
+		panic(err)
 	}
 	scan := bufio.NewScanner(r)
 
 	err = cmd.Start()
 	if err != nil {
-		log.Panicln(err)
+		p.Logger.Error(
+			"failed to start yt-dlp process",
+			slog.String("err", err.Error()),
+		)
+		panic(err)
 	}
 
 	p.proc = cmd.Process
@@ -149,10 +167,10 @@ func (p *Process) Start() {
 					Speed:      stdout.Speed,
 					ETA:        stdout.Eta,
 				}
-				log.Println(
-					cli.BgGreen, "DL", cli.Reset,
-					cli.BgBlue, p.getShortId(), cli.Reset,
-					p.Url, stdout.Percentage,
+				p.Logger.Info("progress",
+					slog.String("id", p.getShortId()),
+					slog.String("url", p.Url),
+					slog.String("percentege", stdout.Percentage),
 				)
 			}
 		})
@@ -173,12 +191,9 @@ func (p *Process) Complete() {
 		ETA:        0,
 	}
 
-	shortId := p.getShortId()
-
-	log.Println(
-		cli.BgMagenta, "FINISH", cli.Reset,
-		cli.BgBlue, shortId, cli.Reset,
-		p.Url,
+	p.Logger.Info("finished",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
 	)
 }
 
@@ -195,7 +210,7 @@ func (p *Process) Kill() error {
 		}
 		err = syscall.Kill(-pgid, syscall.SIGTERM)
 
-		log.Println("Killed process", p.Id)
+		p.Logger.Info("killed process", slog.String("id", p.Id))
 		return err
 	}
 
@@ -231,6 +246,12 @@ func (p *Process) GetFormatsSync() (DownloadFormats, error) {
 		p.Url,
 	)
 
+	p.Logger.Info(
+		"retrieving metadata",
+		slog.String("caller", "getFormats"),
+		slog.String("url", p.Url),
+	)
+
 	go func() {
 		decodingError = json.Unmarshal(stdout, &info)
 		wg.Done()
@@ -262,7 +283,11 @@ func (p *Process) SetMetadata() error {
 
 	stdout, err := cmd.StdoutPipe()
 	if err != nil {
-		log.Println("Cannot retrieve info for", p.Url)
+		p.Logger.Error("failed retrieving info",
+			slog.String("id", p.getShortId()),
+			slog.String("url", p.Url),
+			slog.String("err", err.Error()),
+		)
 		return err
 	}
 
@@ -276,10 +301,9 @@ func (p *Process) SetMetadata() error {
 		return err
 	}
 
-	log.Println(
-		cli.BgRed, "Metadata", cli.Reset,
-		cli.BgBlue, p.getShortId(), cli.Reset,
-		p.Url,
+	p.Logger.Info("retrieving metadata",
+		slog.String("id", p.getShortId()),
+		slog.String("url", p.Url),
 	)
 
 	err = json.NewDecoder(stdout).Decode(&info)
@@ -298,3 +322,16 @@ func (p *Process) SetMetadata() error {
 func (p *Process) getShortId() string {
 	return strings.Split(p.Id, "-")[0]
 }
+
+func buildFilename(o *DownloadOutput) {
+	if o.Filename != "" && strings.Contains(o.Filename, ".%(ext)s") {
+		o.Filename += ".%(ext)s"
+	}
+
+	o.Filename = strings.Replace(
+		o.Filename,
+		".%(ext)s.%(ext)s",
+		".%(ext)s",
+		1,
+	)
+}

server/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/logging/handler.go

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

server/logging/observable_logger.go

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

server/middleware/jwt.go

@@ -1,56 +1,53 @@
 package middlewares
 
 import (
+	"errors"
 	"fmt"
 	"net/http"
 	"os"
 	"time"
 
 	"github.com/golang-jwt/jwt/v5"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
-	"github.com/marcopeocchi/yt-dlp-web-ui/server/utils"
 )
 
+func validateToken(tokenValue string) 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 claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
+		expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
+
+		if err != nil {
+			return err
+		}
+
+		if time.Now().After(expiresAt) {
+			return errors.New("token expired")
+		}
+	} else {
+		return errors.New("invalid token")
+	}
+
+	return nil
+}
+
 func Authenticated(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		if !config.Instance().RequireAuth {
-			next.ServeHTTP(w, r)
-			return
+		token := r.Header.Get("X-Authentication")
+		if token == "" {
+			token = r.URL.Query().Get("token")
 		}
 
-		cookie, err := r.Cookie(utils.TOKEN_COOKIE_NAME)
-
-		if err != nil {
-			http.Error(w, "invalid token", http.StatusBadRequest)
-			return
-		}
-
-		if cookie == nil {
-			http.Error(w, "invalid token", http.StatusBadRequest)
-			return
-		}
-
-		token, _ := jwt.Parse(cookie.Value, func(t *jwt.Token) (interface{}, error) {
-			if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
-				return nil, fmt.Errorf("unexpected signing method: %v", t.Header["alg"])
-			}
-			return []byte(os.Getenv("JWT_SECRET")), nil
-		})
-
-		if claims, ok := token.Claims.(jwt.MapClaims); ok && token.Valid {
-			expiresAt, err := time.Parse(time.RFC3339, claims["expiresAt"].(string))
-
-			if err != nil {
-				http.Error(w, err.Error(), http.StatusInternalServerError)
-				return
-			}
-
-			if time.Now().After(expiresAt) {
-				http.Error(w, "token expired", http.StatusBadRequest)
-				return
-			}
-		} else {
-			http.Error(w, "invalid token", http.StatusBadRequest)
+		if err := validateToken(token); err != nil {
+			http.Error(w, err.Error(), http.StatusBadRequest)
 			return
 		}
 

server/rest/container.go

@@ -4,6 +4,7 @@ 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"
 )
@@ -20,12 +21,17 @@ func ApplyRouter(db *sql.DB, mdb *internal.MemoryDB, mq *internal.MessageQueue)
 	h := Container(db, mdb, mq)
 
 	return func(r chi.Router) {
-		r.Use(middlewares.Authenticated)
+		if config.Instance().RequireAuth {
+			r.Use(middlewares.Authenticated)
+		}
 		r.Post("/exec", h.Exec())
 		r.Get("/running", h.Running())
 		r.Post("/cookies", h.SetCookies())
 		r.Post("/template", h.AddTemplate())
 		r.Get("/template/all", h.GetTemplates())
 		r.Delete("/template/{id}", h.DeleteTemplate())
+
+		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"
@@ -154,3 +157,55 @@ func (h *Handler) DeleteTemplate() 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")
+
+		tree, err := h.service.DirectoryTree(r.Context())
+		if err != nil {
+			http.Error(w, err.Error(), http.StatusInternalServerError)
+			return
+		}
+
+		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/service.go

@@ -4,16 +4,19 @@ import (
 	"context"
 	"database/sql"
 	"errors"
+	"log/slog"
 	"os"
 
 	"github.com/google/uuid"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
 )
 
 type Service struct {
-	mdb *internal.MemoryDB
-	db  *sql.DB
-	mq  *internal.MessageQueue
+	mdb    *internal.MemoryDB
+	db     *sql.DB
+	mq     *internal.MessageQueue
+	logger *slog.Logger
 }
 
 func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
@@ -24,6 +27,7 @@ func (s *Service) Exec(req internal.DownloadRequest) (string, error) {
 			Path:     req.Path,
 			Filename: req.Rename,
 		},
+		Logger: s.logger,
 	}
 
 	id := s.mdb.Set(p)
@@ -85,6 +89,8 @@ func (s *Service) GetTemplates(ctx context.Context) (*[]internal.CustomTemplate,
 		return nil, err
 	}
 
+	defer rows.Close()
+
 	templates := make([]internal.CustomTemplate, 0)
 
 	for rows.Next() {
@@ -113,3 +119,16 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 
 	return err
 }
+
+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/container.go

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

server/rpc/handlers.go

@@ -2,6 +2,7 @@ package rpc
 
 import (
 	"io"
+	"log"
 	"net/http"
 
 	"github.com/gorilla/websocket"
@@ -29,6 +30,7 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 		mtype, reader, err := c.NextReader()
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			log.Println(err)
 			break
 		}
 
@@ -37,6 +39,7 @@ func WebSocket(w http.ResponseWriter, r *http.Request) {
 		writer, err := c.NextWriter(mtype)
 		if err != nil {
 			http.Error(w, err.Error(), http.StatusInternalServerError)
+			log.Println(err)
 			break
 		}
 

server/rpc/service.go

@@ -1,7 +1,7 @@
 package rpc
 
 import (
-	"log"
+	"log/slog"
 
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/sys"
@@ -9,8 +9,9 @@ import (
 )
 
 type Service struct {
-	db *internal.MemoryDB
-	mq *internal.MessageQueue
+	db     *internal.MemoryDB
+	mq     *internal.MessageQueue
+	logger *slog.Logger
 }
 
 type Running []internal.ProcessResponse
@@ -34,6 +35,7 @@ func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
 			Path:     args.Path,
 			Filename: args.Rename,
 		},
+		Logger: s.logger,
 	}
 
 	s.db.Set(p)
@@ -46,7 +48,7 @@ func (s *Service) Exec(args internal.DownloadRequest, result *string) error {
 // Exec spawns a Process.
 // The result of the execution is the newly spawned process Id.
 func (s *Service) ExecPlaylist(args internal.DownloadRequest, result *string) error {
-	err := internal.PlaylistDetect(args, s.mq, s.db)
+	err := internal.PlaylistDetect(args, s.mq, s.db, s.logger)
 	if err != nil {
 		return err
 	}
@@ -69,7 +71,7 @@ func (s *Service) Progess(args Args, progress *internal.DownloadProgress) error
 // Progess retrieves available format for a given resource
 func (s *Service) Formats(args Args, meta *internal.DownloadFormats) error {
 	var err error
-	p := internal.Process{Url: args.URL}
+	p := internal.Process{Url: args.URL, Logger: s.logger}
 	*meta, err = p.GetFormatsSync()
 	return err
 }
@@ -88,7 +90,7 @@ func (s *Service) Running(args NoArgs, running *Running) error {
 
 // Kill kills a process given its id and remove it from the memoryDB
 func (s *Service) Kill(args string, killed *string) error {
-	log.Println("Trying killing process with id", args)
+	s.logger.Info("Trying killing process with id", slog.String("id", args))
 	proc, err := s.db.Get(args)
 
 	if err != nil {
@@ -106,7 +108,7 @@ func (s *Service) Kill(args string, killed *string) error {
 // KillAll kills all process unconditionally and removes them from
 // the memory db
 func (s *Service) KillAll(args NoArgs, killed *string) error {
-	log.Println("Killing all spawned processes", args)
+	s.logger.Info("Killing all spawned processes")
 	keys := s.db.Keys()
 	var err error
 	for _, key := range *keys {
@@ -125,7 +127,7 @@ func (s *Service) KillAll(args NoArgs, killed *string) error {
 
 // Remove a process from the db rendering it unusable if active
 func (s *Service) Clear(args string, killed *string) error {
-	log.Println("Clearing process with id", args)
+	s.logger.Info("Clearing process with id", slog.String("id", args))
 	s.db.Delete(args)
 	return nil
 }
@@ -138,7 +140,7 @@ func (s *Service) FreeSpace(args NoArgs, free *uint64) error {
 }
 
 // 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 dfsTree != nil {
 		*tree = *dfsTree
@@ -148,7 +150,7 @@ func (s *Service) DirectoryTree(args NoArgs, tree *[]string) error {
 
 // Updates the yt-dlp binary using its builtin function
 func (s *Service) UpdateExecutable(args NoArgs, updated *bool) error {
-	log.Println("Updating yt-dlp executable to the latest release")
+	s.logger.Info("Updating yt-dlp executable to the latest release")
 	err := updater.UpdateExecutable()
 	if err != nil {
 		*updated = true

server/server.go

@@ -4,8 +4,9 @@ import (
 	"context"
 	"database/sql"
 	"fmt"
+	"io"
 	"io/fs"
-	"log"
+	"log/slog"
 	"net/http"
 	"net/rpc"
 	"os"
@@ -14,11 +15,12 @@ import (
 	"time"
 
 	"github.com/go-chi/chi/v5"
-	"github.com/go-chi/chi/v5/middleware"
 	"github.com/go-chi/cors"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/config"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/dbutils"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/handlers"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/internal"
+	"github.com/marcopeocchi/yt-dlp-web-ui/server/logging"
 	middlewares "github.com/marcopeocchi/yt-dlp-web-ui/server/middleware"
 	"github.com/marcopeocchi/yt-dlp-web-ui/server/rest"
 	ytdlpRPC "github.com/marcopeocchi/yt-dlp-web-ui/server/rpc"
@@ -28,24 +30,34 @@ import (
 
 type serverConfig struct {
 	frontend fs.FS
+	logger   *slog.Logger
+	host     string
 	port     int
 	mdb      *internal.MemoryDB
 	db       *sql.DB
 	mq       *internal.MessageQueue
 }
 
-func RunBlocking(port int, frontend fs.FS, dbPath string) {
+func RunBlocking(host string, port int, frontend fs.FS, dbPath string) {
 	var mdb internal.MemoryDB
-	mdb.Restore()
+
+	logger := slog.New(
+		slog.NewTextHandler(
+			io.MultiWriter(os.Stdout, logging.NewObservableLogger()),
+			nil,
+		),
+	)
+
+	mdb.Restore(logger)
 
 	db, err := sql.Open("sqlite", dbPath)
 	if err != nil {
-		log.Fatalln(err)
+		logger.Error("failed to open database", slog.String("err", err.Error()))
 	}
 
 	err = dbutils.AutoMigrate(context.Background(), db)
 	if err != nil {
-		log.Fatalln(err)
+		logger.Error("failed to init database", slog.String("err", err.Error()))
 	}
 
 	mq := internal.NewMessageQueue()
@@ -53,6 +65,8 @@ func RunBlocking(port int, frontend fs.FS, dbPath string) {
 
 	srv := newServer(serverConfig{
 		frontend: frontend,
+		logger:   logger,
+		host:     host,
 		port:     port,
 		mdb:      &mdb,
 		mq:       mq,
@@ -60,30 +74,50 @@ func RunBlocking(port int, frontend fs.FS, dbPath string) {
 	})
 
 	go gracefulShutdown(srv, &mdb)
-	go autoPersist(time.Minute*5, &mdb)
+	go autoPersist(time.Minute*5, &mdb, logger)
 
-	log.Fatal(srv.ListenAndServe())
+	logger.Info("yt-dlp-webui started", slog.Int("port", port))
+
+	if err := srv.ListenAndServe(); err != nil {
+		logger.Warn("http server stopped", slog.String("err", err.Error()))
+	}
 }
 
 func newServer(c serverConfig) *http.Server {
-	service := ytdlpRPC.Container(c.mdb, c.mq)
+	service := ytdlpRPC.Container(c.mdb, c.mq, c.logger)
 	rpc.Register(service)
 
 	r := chi.NewRouter()
 
-	r.Use(cors.AllowAll().Handler)
-	r.Use(middleware.Logger)
+	corsMiddleware := cors.New(cors.Options{
+		AllowedOrigins: []string{"*"},
+		AllowedMethods: []string{
+			http.MethodHead,
+			http.MethodGet,
+			http.MethodPost,
+			http.MethodPut,
+			http.MethodPatch,
+			http.MethodDelete,
+		},
+		AllowedHeaders:   []string{"*"},
+		AllowCredentials: true,
+	})
 
-	app := http.FileServer(http.FS(c.frontend))
+	r.Use(corsMiddleware.Handler)
+	// use in dev
+	// r.Use(middleware.Logger)
 
-	r.Mount("/", app)
+	r.Mount("/", http.FileServer(http.FS(c.frontend)))
 
 	// Archive routes
 	r.Route("/archive", func(r chi.Router) {
-		r.Use(middlewares.Authenticated)
+		if config.Instance().RequireAuth {
+			r.Use(middlewares.Authenticated)
+		}
 		r.Post("/downloaded", handlers.ListDownloaded)
 		r.Post("/delete", handlers.DeleteFile)
-		r.Get("/d/{id}", handlers.SendFile)
+		r.Get("/d/{id}", handlers.DownloadFile)
+		r.Get("/v/{id}", handlers.SendFile)
 	})
 
 	// Authentication routes
@@ -98,8 +132,11 @@ func newServer(c serverConfig) *http.Server {
 	// REST API handlers
 	r.Route("/api/v1", rest.ApplyRouter(c.db, c.mdb, c.mq))
 
+	// Logging
+	r.Route("/log", logging.ApplyRouter())
+
 	return &http.Server{
-		Addr:    fmt.Sprintf(":%d", c.port),
+		Addr:    fmt.Sprintf("%s:%d", c.host, c.port),
 		Handler: r,
 	}
 }
@@ -113,7 +150,7 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 
 	go func() {
 		<-ctx.Done()
-		log.Println("shutdown signal received")
+		slog.Info("shutdown signal received")
 
 		defer func() {
 			db.Persist()
@@ -123,9 +160,15 @@ func gracefulShutdown(srv *http.Server, db *internal.MemoryDB) {
 	}()
 }
 
-func autoPersist(d time.Duration, db *internal.MemoryDB) {
+func autoPersist(d time.Duration, db *internal.MemoryDB, logger *slog.Logger) {
 	for {
-		db.Persist()
+		if err := db.Persist(); err != nil {
+			logger.Info(
+				"failed to persisted session",
+				slog.String("err", err.Error()),
+			)
+		}
+		logger.Info("sucessfully persisted session")
 		time.Sleep(d)
 	}
 }

server/sys/fs.go

@@ -18,39 +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
 
-	stack := internal.NewStack[Node]()
-	flattened := make([]string, 0)
+	stack := internal.NewStack[FSNode]()
 
-	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 {
 			childPath := filepath.Join(current.path, entry.Name())
-			childNode := Node{path: childPath}
+			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/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>

ui/src/lib/FloatingAction.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Plus } from 'lucide-svelte';
+</script>
+
+<div class="absolute bottom-10 right-10">
+  <!-- <div class="relative mb-4 flex flex-col justify-center items-center gap-2">
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+    <button
+      class="relative flex items-center justify-center bg-blue-500 h-8 w-8 z-10 rounded-2xl shadow-xl text-neutral-100"
+    >
+      <Plus size={18} />
+    </button>
+  </div> -->
+  <button
+    class="relative bg-blue-500 p-5 z-10 rounded-2xl shadow-xl text-neutral-100"
+  >
+    <Plus />
+  </button>
+</div>

ui/src/lib/Footer.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { ChevronDown, ChevronUp } from 'lucide-svelte';
+  import { cubicOut } from 'svelte/easing';
+  import { tweened } from 'svelte/motion';
+  import NewDownload from './NewDownload.svelte';
+
+  const height = tweened(52, {
+    duration: 300,
+    easing: cubicOut,
+  });
+
+  const minHeight = 52;
+  const maxHeight = window.innerHeight / 1.5;
+
+  let open = false;
+  $: open = $height > minHeight;
+</script>
+
+<footer
+  class="
+  fixed bottom-0 z-10
+  w-full
+  p-2
+  bg-neutral-100 dark:bg-neutral-800
+  border-t dark:border-t-neutral-700
+  shadow-lg
+  rounded-t-xl"
+  style="min-height: {$height}px;"
+>
+  <button
+    class="p-1 bg-neutral-200 dark:bg-neutral-700 rounded-lg border dark:border-neutral-700"
+    on:click={() => (open ? height.set(minHeight) : height.set(maxHeight))}
+  >
+    {#if open}
+      <ChevronDown />
+    {:else}
+      <ChevronUp />
+    {/if}
+  </button>
+
+  <div />
+
+  {#if $height > 100}
+    <div class="mt-2">
+      <NewDownload />
+    </div>
+  {/if}
+</footer>

ui/src/lib/FormatsList.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { DLFormat } from './types';
+
+  let group = '';
+  export let formats: DLFormat[];
+
+  $: console.log(group);
+</script>
+
+<div class="w-full mt-4">
+  <div class="mx-auto w-full">
+    <fieldset class="grid grid-cols-7 gap-2">
+      {#each formats as format}
+        <div class="relative">
+          <input
+            id="formats"
+            class="absolute opacity-0 w-0 h-0 peer"
+            type="radio"
+            bind:group
+            name="type"
+            value="formats"
+          />
+          <label
+            for="formats"
+            class="
+            [&_p]:text-gray-900 [&_span]:text-gray-500
+            peer-checked:[&_p]:text-white peer-checked:[&_span]:text-blue-100
+            peer-focus:ring-2 peer-focus:ring-white
+            peer-focus:ring-opacity-60 peer-focus:ring-offset-2 peer-focus:ring-offset-blue-300
+            bg-white
+            relative flex
+            cursor-pointer
+            rounded-lg px-5 py-4
+            shadow-md
+            focus:outline-none
+            peer-checked:bg-blue-700/75
+            peer-checked:text-white"
+          >
+            <div class="flex w-full items-center justify-between">
+              <div class="flex items-center">
+                <div class="text-sm">
+                  <p class="font-medium" id={format.format_id}>
+                    {format.resolution}
+                  </p>
+                  <span class="inline" id={format.format_id}>
+                    <span>{format.vcodec}</span>
+                    <span aria-hidden="true">·</span>
+                    <span>{format.acodec}</span>
+                  </span>
+                </div>
+              </div>
+              <div class="shrink-0 text-white">
+                <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6">
+                  <circle cx="12" cy="12" r="12" fill="#fff" opacity="0.2" />
+                  <path
+                    d="M7 13l3 3 7-7"
+                    stroke="#fff"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </div>
+          </label>
+        </div>
+      {/each}
+    </fieldset>
+  </div>
+</div>

ui/src/lib/FullscreenSpinner.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Spinner from './Spinner.svelte';
+</script>
+
+<div
+  class="top-0 left-0 absolute w-full h-full bg-neutral-950/20 flex items-center justify-center z-50"
+>
+  <Spinner />
+</div>

ui/src/lib/Navbar.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {
+    ArrowDownUp,
+    Github,
+    HardDrive,
+    Network,
+    Settings,
+  } from 'lucide-svelte';
+  import { downloads, rpcClient, serverApiEndpoint } from './store';
+  import { formatGiB, formatSpeedMiB } from './utils';
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import { link } from 'svelte-spa-router';
+
+  let downloadSpeed = 0;
+
+  const unsubscribe = downloads.subscribe((downloads) =>
+    pipe(
+      downloads,
+      O.matchW(
+        () => (downloadSpeed = 0),
+        (d) =>
+          (downloadSpeed = d
+            .map((d) => d.progress.speed)
+            .reduce((a, b) => a + b)),
+      ),
+    ),
+  );
+
+  onDestroy(unsubscribe);
+</script>
+
+<nav
+  class="
+  p-4
+  flex justify-between items-center
+  bg-neutral-100 dark:bg-neutral-800
+  rounded-b-xl
+  border-b dark:border-b-neutral-700
+  shadow-lg
+  select-none"
+>
+  <a use:link={'/'} href="/" class="font-semibold text-lg">yt-dlp WebUI</a>
+
+  <div />
+
+  <div class="flex items-center gap-2 text-sm">
+    <div
+      class="hidden sm:flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+    >
+      <ArrowDownUp size={18} />
+      <div>
+        {formatSpeedMiB(downloadSpeed)}
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 text-sm">
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <HardDrive size={18} />
+        <div>
+          {#await $rpcClient.freeSpace()}
+            Loading...
+          {:then freeSpace}
+            {formatGiB(freeSpace.result)}
+          {/await}
+        </div>
+      </div>
+
+      <div
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Network size={18} />
+        <div>
+          {$serverApiEndpoint.split('//')[1]}
+        </div>
+      </div>
+
+      <a
+        href="https://github.com/marcopeocchi/yt-dlp-web-ui"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Github size={18} />
+      </a>
+
+      <a
+        use:link={'/settings'}
+        href="/settings"
+        class="flex items-center gap-1.5 p-1 text-neutral-900 bg-blue-200 rounded-lg"
+      >
+        <Settings size={18} />
+      </a>
+    </div>
+  </div>
+</nav>

ui/src/lib/NewDownload.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { downloadTemplates, rpcClient } from './store';
+  import Select from './Select.svelte';
+  import type { DLMetadata } from './types';
+  import FormatsList from './FormatsList.svelte';
+
+  let url: string = '';
+  let args: string = '';
+  let metadata: DLMetadata;
+
+  const download = () =>
+    get(rpcClient).download({
+      url,
+      args,
+    });
+
+  const getFormats = () =>
+    get(rpcClient)
+      .formats(url)
+      ?.then((f) => (metadata = f.result));
+</script>
+
+<div class="w-full px-8">
+  <div class="my-4 font-semibold text-xl">New download</div>
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2 w-full mb-2">
+    <TextField placeholder="https://..." label="URL" bind:value={url} />
+    <TextField
+      placeholder="arguments separated by space"
+      label="yt-dlp arguments"
+      bind:value={args}
+    />
+    <Select bind:value={args}>
+      <option selected disabled value=""> Select download template </option>
+      {#each $downloadTemplates as template}
+        <option id={template.id} value={template.content}>
+          {template.name}
+        </option>
+      {/each}
+    </Select>
+  </div>
+  <Button class="mt-2" on:click={download}>Download</Button>
+  <Button class="mt-2" on:click={getFormats}>Select format</Button>
+  {#if metadata}
+    <FormatsList formats={metadata.formats} />
+  {/if}
+</div>

ui/src/lib/RPCClient.ts

@@ -0,0 +1,195 @@
+import type { DLMetadata, RPCRequest, RPCResponse, RPCResult } from './types'
+
+type DownloadRequestArgs = {
+  url: string,
+  args: string,
+  pathOverride?: string,
+  renameTo?: string,
+  playlist?: boolean
+}
+
+export class RPCClient {
+  private seq: number
+  private httpEndpoint: string
+  private readonly _socket$: WebSocket
+  private readonly token?: string
+
+  constructor(httpEndpoint: string, webSocketEndpoint: string, token?: string) {
+    this.seq = 0
+    this.httpEndpoint = httpEndpoint
+    this.token = token
+    this._socket$ = new WebSocket(
+      token ? `${webSocketEndpoint}?token=${token}` : webSocketEndpoint
+    )
+  }
+
+  /**
+   * Websocket connection
+   */
+  public get socket() {
+    return this._socket$
+  }
+
+  private incrementSeq() {
+    return String(this.seq++)
+  }
+
+  private send(req: RPCRequest) {
+    this._socket$.send(JSON.stringify({
+      ...req,
+      id: this.incrementSeq(),
+    }))
+  }
+
+  private argsSanitizer(args: string) {
+    return args
+      .split(' ')
+      .map(a => a.trim().replaceAll("'", '').replaceAll('"', ''))
+      .filter(Boolean)
+  }
+
+  private async sendHTTP<T>(req: RPCRequest) {
+    const res = await fetch(this.httpEndpoint, {
+      method: 'POST',
+      headers: {
+        'X-Authentication': this.token ?? ''
+      },
+      body: JSON.stringify({
+        ...req,
+        id: this.incrementSeq(),
+      })
+    })
+    const data: RPCResponse<T> = await res.json()
+
+    return data
+  }
+
+  /**
+   * Request a new download. Handles arguments sanitization.
+   * @param req payload
+   * @returns 
+   */
+  public download(req: DownloadRequestArgs) {
+    if (!req.url) {
+      return
+    }
+
+    const rename = req.args.includes('-o')
+      ? req.args
+        .substring(req.args.indexOf('-o'))
+        .replaceAll("'", '')
+        .replaceAll('"', '')
+        .split('-o')
+        .map(s => s.trim())
+        .join('')
+        .split(' ')
+        .at(0) ?? ''
+      : ''
+
+    const sanitizedArgs = this.argsSanitizer(
+      req.args.replace('-o', '').replace(rename, '')
+    )
+
+    if (req.playlist) {
+      return this.sendHTTP({
+        method: 'Service.ExecPlaylist',
+        params: [{
+          URL: req.url,
+          Params: sanitizedArgs,
+          Path: req.pathOverride,
+          Rename: req.renameTo || rename,
+        }]
+      })
+    }
+
+    this.sendHTTP({
+      method: 'Service.Exec',
+      params: [{
+        URL: req.url.split('?list').at(0)!,
+        Params: sanitizedArgs,
+        Path: req.pathOverride,
+        Rename: req.renameTo || rename,
+      }]
+    })
+  }
+
+  /**
+   * Requests the available formats for a given url (-f arg)
+   * @param url requested url
+   * @returns 
+   */
+  public formats(url: string) {
+    if (url) {
+      return this.sendHTTP<DLMetadata>({
+        method: 'Service.Formats',
+        params: [{
+          URL: url.split('?list').at(0)!,
+        }]
+      })
+    }
+  }
+
+  /**
+   * Requests all downloads
+   */
+  public running() {
+    this.send({
+      method: 'Service.Running',
+      params: [],
+    })
+  }
+
+  /**
+   * Stops and removes a download asynchronously
+   * @param id download id
+   */
+  public kill(id: string) {
+    this.sendHTTP({
+      method: 'Service.Kill',
+      params: [id],
+    })
+  }
+
+  /**
+   * Stops and removes all downloads
+   */
+  public killAll() {
+    this.sendHTTP({
+      method: 'Service.KillAll',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the avaliable space on downloads directory
+   * @returns free space in bytes
+   */
+  public freeSpace() {
+    return this.sendHTTP<number>({
+      method: 'Service.FreeSpace',
+      params: [],
+    })
+  }
+
+  /**
+   * Get asynchronously the tree view of the download directory
+   * @returns free space in bytes
+   */
+  public directoryTree() {
+    return this.sendHTTP<string[]>({
+      method: 'Service.DirectoryTree',
+      params: [],
+    })
+  }
+
+  /**
+   * Updates synchronously yt-dlp executable
+   * @returns free space in bytes
+   */
+  public updateExecutable() {
+    return this.sendHTTP({
+      method: 'Service.UpdateExecutable',
+      params: []
+    })
+  }
+}

ui/src/lib/Select.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<select
+  class="
+  p-2
+  bg-neutral-50
+  border rounded-lg
+  appearance-none
+  text-sm font-semibold
+  focus:outline-blue-300
+  "
+  bind:value
+  {disabled}
+  {placeholder}
+>
+  <slot />
+</select>

ui/src/lib/Settings.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { get } from 'svelte/store';
+  import Button from './Button.svelte';
+  import TextField from './TextField.svelte';
+  import { rpcClient, rpcHost, rpcPort } from './store';
+  import FullscreenSpinner from './FullscreenSpinner.svelte';
+
+  let loading: Promise<any>;
+
+  const update = () => (loading = get(rpcClient).updateExecutable());
+</script>
+
+<div class="w-full">
+  <div class="font-semibold text-lg mb-4">Settings</div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
+    <TextField
+      label="Server address"
+      bind:value={$rpcHost}
+      placeholder="localhost"
+    />
+    <TextField label="Server port" bind:value={$rpcPort} placeholder="3033" />
+  </div>
+
+  <Button class="mt-4" on:click={update}>Update yt-dlp</Button>
+
+  {#if loading}
+    {#await loading}
+      <FullscreenSpinner />
+    {/await}
+  {/if}
+
+  <!-- <CookiesTextField /> -->
+</div>

ui/src/lib/Spinner.svelte

@@ -0,0 +1,19 @@
+<div role="status">
+  <svg
+    aria-hidden="true"
+    class="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-blue-400"
+    viewBox="0 0 100 101"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+      fill="currentFill"
+    />
+  </svg>
+  <span class="sr-only">Loading...</span>
+</div>

ui/src/lib/TextField.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  let clazz: string = '';
+  export let label: string;
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<div class="flex flex-col gap-0.5 text-sm font-semibold">
+  <label for=""> {label} </label>
+  <input
+    type="text"
+    class={`p-2 
+    bg-neutral-50 border 
+    rounded-lg 
+    focus:outline-blue-300 
+    dark:bg-neutral-700 dark:border-neutral-900
+    ${clazz}
+    `}
+    on:keyup
+    bind:value
+    {placeholder}
+    {disabled}
+  />
+</div>

ui/src/lib/ffetch.ts

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

ui/src/lib/store.ts

@@ -0,0 +1,57 @@
+import * as O from 'fp-ts/lib/Option'
+import { derived, readable, writable } from 'svelte/store'
+import { RPCClient } from './RPCClient'
+import { type CustomTemplate, type RPCResult } from './types'
+
+export const rpcHost = writable<string>(localStorage.getItem('rpcHost') ?? 'localhost')
+export const rpcPort = writable<number>(Number(localStorage.getItem('rpcPort')) || 3033)
+
+// if authentication is enabled...
+export const rpcWebToken = writable<string>(localStorage.getItem('rpcWebToken') ?? '')
+
+// will be used to access the api and archive endpoints
+export const serverApiEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol}//${$host}`
+    : `${window.location.protocol}//${$host}:${$port}`
+)
+
+// access the websocket JSON-RPC 1.0 to gather downloads state
+export const websocketRpcEndpoint = derived(
+  [rpcHost, rpcPort],
+  ([$host, $port]) => window.location.port == ''
+    ? `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}/rpc/ws`
+    : `${window.location.protocol.startsWith('https') ? 'wss:' : 'ws:'}//${$host}:${$port}/rpc/ws`
+)
+
+// same as websocket one but using HTTP-POST mainly used to send commands (download, stop, ...)
+export const httpPostRpcEndpoint = derived(
+  serverApiEndpoint,
+  $ep => window.location.port == '' ? `${$ep}/rpc/http` : `${$ep}/rpc/http`
+)
+
+/**
+ * Will handle Websocket and HTTP-POST communications based on the requested method
+*/
+export const rpcClient = derived(
+  [httpPostRpcEndpoint, websocketRpcEndpoint, rpcWebToken],
+  ([$http, $ws, $token]) => new RPCClient($http, $ws, $token)
+)
+
+/**
+ * Stores all the downloads returned by the rpc
+ */
+export const downloads = writable<O.Option<RPCResult[]>>(O.none)
+
+export const cookiesTemplate = writable<string>('')
+
+/**
+ * fetches download templates, needs manual update
+ */
+export const downloadTemplates = readable<CustomTemplate[]>([], (set) => {
+  serverApiEndpoint
+    .subscribe(ep => fetch(`${ep}/api/v1/template/all`)
+      .then(res => res.json())
+      .then(data => set(data)))
+})

ui/src/lib/types.ts

@@ -0,0 +1,90 @@
+export type RPCMethods =
+  | "Service.Exec"
+  | "Service.Kill"
+  | "Service.Clear"
+  | "Service.Running"
+  | "Service.KillAll"
+  | "Service.FreeSpace"
+  | "Service.Formats"
+  | "Service.ExecPlaylist"
+  | "Service.DirectoryTree"
+  | "Service.UpdateExecutable"
+
+export type RPCRequest = {
+  method: RPCMethods
+  params?: any[]
+  id?: string
+}
+
+export type RPCResponse<T> = Readonly<{
+  result: T
+  error: number | null
+  id?: string
+}>
+
+type DownloadInfo = {
+  url: string
+  filesize_approx?: number
+  resolution?: string
+  thumbnail: string
+  title: string
+  vcodec?: string
+  acodec?: string
+  ext?: string
+  created_at: string
+}
+
+type DownloadProgress = {
+  speed: number
+  eta: number
+  percentage: string
+  process_status: number
+}
+
+export type RPCResult = Readonly<{
+  id: string
+  progress: DownloadProgress
+  info: DownloadInfo
+}>
+
+export type RPCParams = {
+  URL: string
+  Params?: string
+}
+
+export type DLMetadata = {
+  formats: Array<DLFormat>
+  best: DLFormat
+  thumbnail: string
+  title: string
+}
+
+export type DLFormat = {
+  format_id: string
+  format_note: string
+  fps: number
+  resolution: string
+  vcodec: string
+  acodec: string
+  filesize_approx: number
+}
+
+export type DirectoryEntry = {
+  name: string
+  path: string
+  size: number
+  shaSum: string
+  modTime: string
+  isVideo: boolean
+  isDirectory: boolean
+}
+
+export type DeleteRequest = Pick<DirectoryEntry, 'path' | 'shaSum'>
+
+export type PlayRequest = Pick<DirectoryEntry, 'path'>
+
+export type CustomTemplate = {
+  id: string
+  name: string
+  content: string
+}

ui/src/lib/utils.ts

@@ -0,0 +1,93 @@
+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)
+}
+
+export function validateDomain(url: string): boolean {
+  const urlRegex = /(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/
+  const slugRegex = /^[a-z0-9]+(?:-[a-z0-9]+)*$/
+
+  const [name, slug] = url.split('/')
+
+  return urlRegex.test(url) || name === 'localhost' && slugRegex.test(slug)
+}
+
+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) {
+    return codes.reduce((v, a) => ` -f ${v}+${a}`)
+  }
+  if (codes.length === 1) {
+    return ` -f ${codes[0]}`
+  }
+  return ''
+}
+
+export const formatGiB = (bytes: number) =>
+  `${(bytes / 1_000_000_000).toFixed(0)}GiB`
+
+export const roundMiB = (bytes: number) =>
+  `${(bytes / 1_000_000).toFixed(2)} MiB`
+
+export const formatSpeedMiB = (val: number) =>
+  `${roundMiB(val)}/s`
+
+export const datetimeCompareFunc = (a: string, b: string) =>
+  new Date(a).getTime() - new Date(b).getTime()
+
+export function isRPCResponse(object: any): object is RPCResponse<any> {
+  return 'result' in object && 'id' in object
+}
+
+export function mapProcessStatus(status: number) {
+  switch (status) {
+    case 0:
+      return 'Pending'
+    case 1:
+      return 'Downloading'
+    case 2:
+      return 'Completed'
+    case 3:
+      return 'Error'
+    default:
+      return 'Pending'
+  }
+}
+
+export const prefersDarkMode = () =>
+  window.matchMedia('(prefers-color-scheme: dark)').matches
+
+export const base64URLEncode = (s: string) => pipe(
+  s,
+  s => String.fromCodePoint(...new TextEncoder().encode(s)),
+  btoa,
+  encodeURIComponent
+)
+
+export const debounce = (callback: Function, wait = 300) => {
+  let timeout: ReturnType<typeof setTimeout>
+
+  return (...args: any[]) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => callback(...args), wait)
+  }
+}

ui/src/main.ts

@@ -0,0 +1,11 @@
+import './app.css'
+import '@fontsource/roboto'
+import '@fontsource/roboto/400-italic.css'
+import '@fontsource/roboto/400.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app'),
+})
+
+export default app

ui/src/views/Home.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import * as O from 'fp-ts/Option';
+  import { pipe } from 'fp-ts/lib/function';
+  import { onDestroy } from 'svelte';
+  import DownloadCard from '../lib/DownloadCard.svelte';
+  import Spinner from '../lib/Spinner.svelte';
+  import { downloads, rpcClient } from '../lib/store';
+  import { datetimeCompareFunc, isRPCResponse } from '../lib/utils';
+
+  const unsubscribe = rpcClient.subscribe(($client) => {
+    setInterval(() => $client.running(), 750);
+
+    $client.socket.onmessage = (ev: any) => {
+      const event = JSON.parse(ev.data);
+      // guards
+      if (!isRPCResponse(event)) {
+        return;
+      }
+      if (!Array.isArray(event.result)) {
+        return;
+      }
+
+      if (event.result) {
+        return downloads.set(
+          O.of(
+            event.result
+              .filter((f) => !!f.info.url)
+              .sort((a, b) =>
+                datetimeCompareFunc(b.info.created_at, a.info.created_at),
+              ),
+          ),
+        );
+      }
+
+      downloads.set(O.none);
+    };
+  });
+
+  onDestroy(unsubscribe);
+</script>
+
+{#if O.isNone($downloads)}
+  <div class="h-[90vh] w-full flex justify-center items-center">
+    <Spinner />
+  </div>
+{:else}
+  <div class="grid grid-cols-1 xl:grid-cols-2 gap-2 p-8">
+    {#each pipe( $downloads, O.getOrElseW(() => []), ) as download}
+      <DownloadCard {download} />
+    {/each}
+  </div>
+{/if}

ui/src/views/SettingsView.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Settings from '../lib/Settings.svelte';
+</script>
+
+<main
+  class="bg-neutral-100 dark:bg-neutral-800
+  rounded-xl
+  border dark:border-neutral-700
+  shadow-lg
+  m-8 p-4"
+>
+  <Settings />
+</main>

ui/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

ui/svelte.config.js

@@ -0,0 +1,7 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

ui/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{svelte,js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

ui/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["vite.config.ts"]
+}

ui/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+})