upgraded react to v19

README.md

@@ -155,6 +155,8 @@ Usage yt-dlp-webui:
         session file path (default ".")
   -user string
         Username required for auth
+  -web string
+        frontend web resources path
 ```
 
 ### Config file
@@ -197,6 +199,9 @@ queue_size: 4 # min. 2
 
 # [optional] Path where the sqlite database will be created/opened (default: "./local.db")
 #local_database_path
+
+# [optional] Path where a custom frontend will be loaded (instead of the embedded one)
+#frontend_path: ./web/solid-frontend
 ```
 
 ### Systemd integration
@@ -262,6 +267,22 @@ It is **planned** to also expose a **gRPC** server.
 
 For more information open an issue on GitHub and I will provide more info ASAP.
 
+## Custom frontend
+To load a custom frontend you need to specify its path either in the config file ([see config file](#config-file)) or via flags.
+
+The frontend needs to follow this structure:
+```
+path/to/my/frontend
+├── assets
+│   ├── js-chunk-1.js (example)
+│   ├── js-chunk-2.js (example)
+│   ├── style.css (example)
+└── index.html
+```
+
+`assets` is where the resources will be loaded.  
+`index.html` is the entrypoint.
+
 ## Nix
 This repo adds support for Nix(OS) in various ways through a `flake-parts` flake. 
 For more info, please refer to the [official documentation](https://nixos.org/learn/).

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-dlp-webui",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Frontend compontent of yt-dlp-webui",
   "scripts": {
     "dev": "vite",
@@ -10,30 +10,29 @@
   "license": "GPL-3.0-only",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@fontsource/roboto": "^5.0.13",
     "@fontsource/roboto-mono": "^5.0.18",
-    "@mui/icons-material": "^5.15.16",
-    "@mui/material": "^5.15.16",
+    "@mui/icons-material": "^6.2.0",
+    "@mui/material": "^6.2.0",
     "fp-ts": "^2.16.5",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^6.23.1",
     "react-virtuoso": "^4.7.11",
-    "jotai": "^2.10.2",
+    "jotai": "^2.10.3",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.1.0",
     "@types/node": "^20.14.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.7.0",
-    "million": "^3.1.11",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.11"
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3"
   }
 }

frontend/src/atoms/downloadTemplate.ts

@@ -22,8 +22,8 @@ export const filenameTemplateState = atomWithStorage(
   localStorage.getItem('lastFilenameTemplate') ?? ''
 )
 
-export const downloadTemplateState = atom<string>((get) =>
-  `${get(customArgsState)} ${get(cookiesTemplateState)}`
+export const downloadTemplateState = atom<Promise<string>>(async (get) =>
+  `${get(customArgsState)} ${await get(cookiesTemplateState)}`
     .replace(/  +/g, ' ')
     .trim()
 )

frontend/src/components/DownloadDialog.tsx

@@ -2,7 +2,6 @@ import { FileUpload } from '@mui/icons-material'
 import CloseIcon from '@mui/icons-material/Close'
 import {
   Autocomplete,
-  Backdrop,
   Box,
   Button,
   Checkbox,
@@ -21,6 +20,7 @@ import Slide from '@mui/material/Slide'
 import Toolbar from '@mui/material/Toolbar'
 import Typography from '@mui/material/Typography'
 import { TransitionProps } from '@mui/material/transitions'
+import { useAtom, useAtomValue } from 'jotai'
 import {
   FC,
   Suspense,
@@ -30,18 +30,22 @@ import {
   useState,
   useTransition
 } from 'react'
-import { customArgsState, downloadTemplateState, filenameTemplateState, savedTemplatesState } from '../atoms/downloadTemplate'
+import {
+  customArgsState,
+  downloadTemplateState,
+  filenameTemplateState,
+  savedTemplatesState
+} from '../atoms/downloadTemplate'
 import { settingsState } from '../atoms/settings'
 import { availableDownloadPathsState, connectedState } from '../atoms/status'
 import FormatsGrid from '../components/FormatsGrid'
+import { useToast } from '../hooks/toast'
 import { useI18n } from '../hooks/useI18n'
 import { useRPC } from '../hooks/useRPC'
 import type { DLMetadata } from '../types'
 import { toFormatArgs } from '../utils'
 import ExtraDownloadOptions from './ExtraDownloadOptions'
-import { useToast } from '../hooks/toast'
 import LoadingBackdrop from './LoadingBackdrop'
-import { useAtom, useAtomValue } from 'jotai'
 
 const Transition = forwardRef(function Transition(
   props: TransitionProps & {

frontend/vite.config.ts

@@ -1,12 +1,10 @@
 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(),
     ],

main.go

@@ -23,6 +23,7 @@ var (
 	downloaderPath    string
 	sessionFilePath   string
 	localDatabasePath string
+	frontendPath      string
 
 	requireAuth bool
 	username    string
@@ -52,6 +53,7 @@ func init() {
 	flag.StringVar(&downloaderPath, "driver", "yt-dlp", "yt-dlp executable path")
 	flag.StringVar(&sessionFilePath, "session", ".", "session file path")
 	flag.StringVar(&localDatabasePath, "db", "local.db", "local database path")
+	flag.StringVar(&frontendPath, "web", "", "frontend web resources path")
 
 	flag.BoolVar(&enableFileLogging, "fl", false, "enable outputting logs to a file")
 	flag.StringVar(&logFile, "lf", "yt-dlp-webui.log", "set log file location")
@@ -69,6 +71,10 @@ func main() {
 		log.Fatalln(err)
 	}
 
+	if frontendPath != "" {
+		frontend = os.DirFS(frontendPath)
+	}
+
 	c := config.Instance()
 
 	{

server/config/config.go

@@ -22,13 +22,13 @@ type Config struct {
 	QueueSize          int    `yaml:"queue_size"`
 	LocalDatabasePath  string `yaml:"local_database_path"`
 	SessionFilePath    string `yaml:"session_file_path"`
-	path              string
-
+	path               string // private
 	UseOpenId          bool   `yaml:"use_openid"`
 	OpenIdProviderURL  string `yaml:"openid_provider_url"`
 	OpenIdClientId     string `yaml:"openid_client_id"`
 	OpenIdClientSecret string `yaml:"openid_client_secret"`
 	OpenIdRedirectURL  string `yaml:"openid_redirect_url"`
+	FrontendPath       string `yaml:"frontend_path"`
 }
 
 var (