ready for v3.2.3

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/Layout.tsx

@@ -16,7 +16,7 @@ import ListItemIcon from '@mui/material/ListItemIcon'
 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 { grey, red } from '@mui/material/colors'
 import { useMemo, useState } from 'react'
 import { Link, Outlet } from 'react-router-dom'
 import { settingsState } from './atoms/settings'
@@ -29,6 +29,7 @@ import ThemeToggler from './components/ThemeToggler'
 import { useI18n } from './hooks/useI18n'
 import Toaster from './providers/ToasterProvider'
 import { useAtomValue } from 'jotai'
+import { getAccentValue } from './utils'
 
 export default function Layout() {
   const [open, setOpen] = useState(false)
@@ -40,11 +41,14 @@ export default function Layout() {
     createTheme({
       palette: {
         mode: settings.theme,
+        primary: {
+          main: getAccentValue(settings.accent)
+        },
         background: {
           default: settings.theme === 'light' ? grey[50] : '#121212'
         },
       },
-    }), [settings.theme]
+    }), [settings.theme, settings.accent]
   )
 
   const toggleDrawer = () => setOpen(state => !state)

frontend/src/assets/i18n.yaml

@@ -65,6 +65,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   german:
     urlInput: Video URL
     statusTitle: Status
@@ -126,6 +127,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   french:
     urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
     statusTitle: Statut
@@ -189,6 +191,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   italian:
     urlInput: URL Video (uno per linea)
     statusTitle: Stato
@@ -249,6 +252,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   chinese:
     urlInput: 视频 URL
     statusTitle: 状态
@@ -310,6 +314,7 @@ languages:
       如果直播已经开始，那么依然可以下载，但是不会记录下载进度。
       直播开始后，将会转移到下载页面
     livestreamExperimentalWarning: 实验性功能，可能存在未知Bug，请谨慎使用
+    accentSelect: 'Accent'
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -369,6 +374,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -428,6 +434,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -487,6 +494,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -547,6 +555,7 @@ languages:
       すでに開始されているライブストリームが提供された場合、ダウンロードは継続されますが進行状況は追跡されません。
       ライブストリームが開始されると、ダウンロードページに移動されます。
     livestreamExperimentalWarning: この機能は実験的なものです。何かが壊れるかもしれません！
+    accentSelect: 'Accent'
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -606,6 +615,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -665,6 +675,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -724,6 +735,7 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'
   swedish:
     urlInput: Videolänk (en per rad)
     statusTitle: Status
@@ -789,3 +801,4 @@ languages:
       If an already started livestream is provided it will be still downloaded but its progress will not be tracked.
       Once started the livestream will be migrated to the downloads page.
     livestreamExperimentalWarning: This feature is still experimental. Something might break!
+    accentSelect: 'Accent'

frontend/src/atoms/settings.ts

@@ -26,11 +26,15 @@ export type Language = (typeof languages)[number]
 export type Theme = 'light' | 'dark' | 'system'
 export type ThemeNarrowed = 'light' | 'dark'
 
+export const accents = ['default', 'red'] as const
+export type Accent = (typeof accents)[number]
+
 export interface SettingsState {
   serverAddr: string
   serverPort: number
   language: Language
   theme: ThemeNarrowed
+  accent: Accent
   cliArgs: string
   formatSelection: boolean
   fileRenaming: boolean
@@ -146,7 +150,11 @@ const themeSelector = atom<ThemeNarrowed>((get) => {
     return 'dark'
   }
   return 'light'
-}
+})
+
+export const accentState = atomWithStorage<Accent>(
+  'accent-color',
+  localStorage.getItem('accent-color') as Accent ?? 'default',
 )
 
 export const settingsState = atom<SettingsState>((get) => ({
@@ -154,6 +162,7 @@ export const settingsState = atom<SettingsState>((get) => ({
   serverPort: get(serverPortState),
   language: get(languageState),
   theme: get(themeSelector),
+  accent: get(accentState),
   cliArgs: get(latestCliArgumentsState),
   formatSelection: get(formatSelectionState),
   fileRenaming: get(fileRenamingState),

frontend/src/utils.ts

@@ -1,4 +1,6 @@
+import { blue, red } from '@mui/material/colors'
 import { pipe } from 'fp-ts/lib/function'
+import { Accent } from './atoms/settings'
 import type { RPCResponse } from "./types"
 import { ProcessStatus } from './types'
 
@@ -79,4 +81,15 @@ export const base64URLEncode = (s: string) => pipe(
   s => String.fromCodePoint(...new TextEncoder().encode(s)),
   btoa,
   encodeURIComponent
-)
+)
+
+export const getAccentValue = (accent: Accent) => {
+  switch (accent) {
+    case 'default':
+      return blue[700]
+    case 'red':
+      return red[600]
+    default:
+      return blue[700]
+  }
+}

frontend/src/views/Settings.tsx

@@ -28,8 +28,11 @@ import {
 } from 'rxjs'
 import { rpcPollingTimeState } from '../atoms/rpc'
 import {
+  Accent,
   Language,
   Theme,
+  accentState,
+  accents,
   appTitleState,
   enableCustomArgsState,
   fileRenamingState,
@@ -65,6 +68,7 @@ export default function Settings() {
   const [pollingTime, setPollingTime] = useAtom(rpcPollingTimeState)
   const [language, setLanguage] = useAtom(languageState)
   const [appTitle, setApptitle] = useAtom(appTitleState)
+  const [accent, setAccent] = useAtom(accentState)
 
   const [theme, setTheme] = useAtom(themeState)
 
@@ -248,7 +252,7 @@ export default function Settings() {
           Appearance
         </Typography>
         <Grid container spacing={2}>
-          <Grid item xs={12} md={6}>
+          <Grid item xs={12}>
             <FormControl fullWidth>
               <InputLabel>{i18n.t('languageSelect')}</InputLabel>
               <Select
@@ -278,6 +282,22 @@ export default function Settings() {
               </Select>
             </FormControl>
           </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl fullWidth>
+              <InputLabel>{i18n.t('accentSelect')}</InputLabel>
+              <Select
+                defaultValue={accent}
+                label={i18n.t('accentSelect')}
+                onChange={(e) => setAccent(e.target.value as Accent)}
+              >
+                {accents.map((accent) => (
+                  <MenuItem key={accent} value={accent}>
+                    {capitalize(accent)}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
         </Grid>
         <Typography variant="h6" color="primary" sx={{ mt: 2, mb: 0.5 }}>
           General download settings

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(),
     ],

server/rest/service.go

@@ -164,7 +164,7 @@ func (s *Service) DeleteTemplate(ctx context.Context, id string) error {
 
 func (s *Service) GetVersion(ctx context.Context) (string, string, error) {
 	//TODO: load from realease properties file, or anything else outside code
-	const CURRENT_RPC_VERSION = "3.2.2"
+	const CURRENT_RPC_VERSION = "3.2.3"
 
 	result := make(chan string, 1)