change apptitle from settings (#88)

frontend/package.json

@@ -16,6 +16,7 @@
     "@mui/material": "^5.13.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^6.13.0",
     "recoil": "^0.7.7",
     "rxjs": "^7.8.1",
@@ -26,6 +27,7 @@
     "@types/node": "^20.3.1",
     "@types/react": "^18.2.13",
     "@types/react-dom": "^18.2.6",
+    "@types/react-helmet": "^6.1.6",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.2",
     "@vitejs/plugin-react-swc": "^3.3.2",

frontend/src/Layout.tsx

@@ -17,6 +17,7 @@ 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 { Link, Outlet } from 'react-router-dom'
 import { useRecoilValue } from 'recoil'
 import { settingsState } from './atoms/settings'
@@ -52,6 +53,11 @@ export default function Layout() {
   return (
     <ThemeProvider theme={theme}>
       <SocketSubscriber>
+        <Helmet>
+          <title>
+            {settings.appTitle}
+          </title>
+        </Helmet>
         <Box sx={{ display: 'flex' }}>
           <CssBaseline />
           <AppBar position="absolute" open={open}>

frontend/src/assets/i18n.yaml

@@ -1,40 +1,5 @@
 ---
 languages:
-  french:
-    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
-    statusTitle: Statut
-    statusReady: Prêt
-    selectFormatButton: Sélectionner le format
-    startButton: Démarrer
-    abortAllButton: Abort All
-    updateBinButton: Mettre à jour le binaire yt-dlp
-    darkThemeButton: Thème sombre
-    lightThemeButton: Thème clair
-    settingsAnchor: Paramètres
-    serverAddressTitle: Adresse du serveur
-    serverPortTitle: Port
-    extractAudioCheckbox: Extraire l'audio
-    noMTimeCheckbox: Ne pas définir le temps de modification du fichier
-    bgReminder: Une fois que vous aurez fermé cette page, le téléchargement se poursuivra en arrière-plan.
-    toastConnected: 'Connecté à '
-    toastUpdated: Mise à jour du binaire yt-dlp !
-    formatSelectionEnabler: Active la sélection des formats vidéo/audio
-    themeSelect: 'Theme'
-    languageSelect: 'Langue'
-    overridesAnchor: Surcharges
-    pathOverrideOption: Activation de la surcharge du chemin de sortie
-    filenameOverrideOption: Active la surcharge du nom du fichier de sortie
-    customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
-    customPath: Chemin personnalisé
-    customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
-    customArgsInput: Arguments yt-dlp personnalisés
-    rpcConnErr: Erreur lors de la connexion au serveur RPC
-    splashText: Aucun téléchargement actif
-    archiveTitle: Archive
-    clipboardAction: URL copiée dans le presse-papiers
-    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
   english:
     urlInput: YouTube or other supported service video URL
     statusTitle: Status
@@ -70,6 +35,43 @@ 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
+    appTitle: App title
+  french:
+    urlInput: URL vidéo de YouTube ou d'un autre service pris en charge
+    statusTitle: Statut
+    statusReady: Prêt
+    selectFormatButton: Sélectionner le format
+    startButton: Démarrer
+    abortAllButton: Abort All
+    updateBinButton: Mettre à jour le binaire yt-dlp
+    darkThemeButton: Thème sombre
+    lightThemeButton: Thème clair
+    settingsAnchor: Paramètres
+    serverAddressTitle: Adresse du serveur
+    serverPortTitle: Port
+    extractAudioCheckbox: Extraire l'audio
+    noMTimeCheckbox: Ne pas définir le temps de modification du fichier
+    bgReminder: Une fois que vous aurez fermé cette page, le téléchargement se poursuivra en arrière-plan.
+    toastConnected: 'Connecté à '
+    toastUpdated: Mise à jour du binaire yt-dlp !
+    formatSelectionEnabler: Active la sélection des formats vidéo/audio
+    themeSelect: 'Theme'
+    languageSelect: 'Langue'
+    overridesAnchor: Surcharges
+    pathOverrideOption: Activation de la surcharge du chemin de sortie
+    filenameOverrideOption: Active la surcharge du nom du fichier de sortie
+    customFilename: Nom de fichier personnalisé (laisser vide pour utiliser le nom par défaut)
+    customPath: Chemin personnalisé
+    customArgs: Activer les args personnalisés yt-dlp (grand pouvoir = grandes responsabilités)
+    customArgsInput: Arguments yt-dlp personnalisés
+    rpcConnErr: Erreur lors de la connexion au serveur RPC
+    splashText: Aucun téléchargement actif
+    archiveTitle: Archive
+    clipboardAction: URL copiée dans le presse-papiers
+    playlistCheckbox: Télécharger la liste de lecture (cela prendra du temps, vous pouvez fermer cette fenêtre après l'avoir validée)
+    restartAppMessage: Nécessite un rechargement de la page pour prendre effet
+    servedFromReverseProxyCheckbox: Est derrière un sous-dossier de proxy inverse
+    appTitle: App title
   italian:
     urlInput: URL di YouTube o di qualsiasi altro servizio supportato
     statusTitle: Stato
@@ -104,6 +106,7 @@ languages:
     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
+    appTitle: Titolo applicazione
   chinese:
     urlInput: YouTube 或其他受支持服务的视频网址
     statusTitle: 状态
@@ -138,6 +141,7 @@ 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
+    appTitle: App title
   spanish:
     urlInput: URL de YouTube u otro servicio compatible
     statusTitle: Estado
@@ -171,6 +175,7 @@ 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
+    appTitle: App title
   russian:
     urlInput: URL-адрес YouTube или любого другого поддерживаемого сервиса
     statusTitle: Статус
@@ -204,6 +209,7 @@ 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
+    appTitle: App title
   korean:
     urlInput: YouTube나 다른 지원되는 사이트의 URL
     statusTitle: 상태
@@ -237,6 +243,7 @@ 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
+    appTitle: App title
   japanese:
     urlInput: YouTubeまたはサポート済み動画のURL
     statusTitle: 状態
@@ -271,6 +278,7 @@ 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
+    appTitle: App title
   catalan:
     urlInput: URL de YouTube o d'un altre servei compatible
     statusTitle: Estat
@@ -304,6 +312,7 @@ 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
+    appTitle: App title
   ukrainian:
     urlInput: URL-адреса YouTube або будь-якого іншого підтримуваного сервісу
     statusTitle: Статус
@@ -337,6 +346,7 @@ 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
+    appTitle: App title
   polish:
     urlInput: Adres URL YouTube lub innej obsługiwanej usługi
     statusTitle: Status
@@ -370,3 +380,4 @@ 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
+    appTitle: App title

frontend/src/atoms/settings.ts

@@ -31,6 +31,7 @@ export interface SettingsState {
   enableCustomArgs: boolean
   listView: boolean
   servedFromReverseProxy: boolean
+  appTitle: string
 }
 
 export const languageState = atom<Language>({
@@ -133,6 +134,15 @@ export const servedFromReverseProxyState = atom({
   ]
 })
 
+export const appTitleState = atom({
+  key: 'appTitleState',
+  default: localStorage.getItem('appTitle') ?? 'yt-dlp Web UI',
+  effects: [
+    ({ onSet }) =>
+      onSet(a => localStorage.setItem('appTitle', a.toString()))
+  ]
+})
+
 export const serverAddressAndPortState = selector({
   key: 'serverAddressAndPortState',
   get: ({ get }) => get(servedFromReverseProxyState)
@@ -187,5 +197,6 @@ export const settingsState = selector<SettingsState>({
     enableCustomArgs: get(enableCustomArgsState),
     listView: get(listViewState),
     servedFromReverseProxy: get(servedFromReverseProxyState),
+    appTitle: get(appTitleState)
   })
 })

frontend/src/views/Settings.tsx

@@ -30,6 +30,7 @@ import {
 import {
   Language,
   Theme,
+  appTitleState,
   enableCustomArgsState,
   fileRenamingState,
   formatSelectionState,
@@ -58,6 +59,7 @@ export default function Settings() {
   const [serverAddr, setServerAddr] = useRecoilState(serverAddressState)
   const [serverPort, setServerPort] = useRecoilState(serverPortState)
   const [language, setLanguage] = useRecoilState(languageState)
+  const [appTitle, setApptitle] = useRecoilState(appTitleState)
   const [cliArgs, setCliArgs] = useRecoilState(latestCliArgumentsState)
   const [theme, setTheme] = useRecoilState(themeState)
 
@@ -169,6 +171,16 @@ export default function Settings() {
                     error={isNaN(Number(serverPort)) || Number(serverPort) > 65535}
                   />
                 </Grid>
+                <Grid item xs={12} md={12}>
+                  <TextField
+                    disabled={reverseProxy}
+                    fullWidth
+                    label={i18n.t('appTitle')}
+                    defaultValue={appTitle}
+                    onChange={(e) => setApptitle(e.currentTarget.value)}
+                    error={appTitle === ''}
+                  />
+                </Grid>
                 <Grid item xs={12}>
                   <FormControlLabel
                     control={