From d57c440afeaa55ccc476c08d95155a8d757c8a81 Mon Sep 17 00:00:00 2001 From: Marco <35533749+marcopeocchi@users.noreply.github.com> Date: Sat, 23 Sep 2023 13:25:02 +0200 Subject: [PATCH] change apptitle from settings (#88) --- frontend/package.json | 2 + frontend/src/Layout.tsx | 6 +++ frontend/src/assets/i18n.yaml | 81 +++++++++++++++++++-------------- frontend/src/atoms/settings.ts | 11 +++++ frontend/src/views/Settings.tsx | 12 +++++ 5 files changed, 77 insertions(+), 35 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index db5e1ac..3cc29c2 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/Layout.tsx b/frontend/src/Layout.tsx index 65c0aa9..96c8438 100644 --- a/frontend/src/Layout.tsx +++ b/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 ( + + + {settings.appTitle} + + diff --git a/frontend/src/assets/i18n.yaml b/frontend/src/assets/i18n.yaml index fac4402..c8ee1be 100644 --- a/frontend/src/assets/i18n.yaml +++ b/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 diff --git a/frontend/src/atoms/settings.ts b/frontend/src/atoms/settings.ts index b5b299b..dd73e44 100644 --- a/frontend/src/atoms/settings.ts +++ b/frontend/src/atoms/settings.ts @@ -31,6 +31,7 @@ export interface SettingsState { enableCustomArgs: boolean listView: boolean servedFromReverseProxy: boolean + appTitle: string } export const languageState = atom({ @@ -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({ enableCustomArgs: get(enableCustomArgsState), listView: get(listViewState), servedFromReverseProxy: get(servedFromReverseProxyState), + appTitle: get(appTitleState) }) }) \ No newline at end of file diff --git a/frontend/src/views/Settings.tsx b/frontend/src/views/Settings.tsx index cebf117..ffe39b6 100644 --- a/frontend/src/views/Settings.tsx +++ b/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} /> + + setApptitle(e.currentTarget.value)} + error={appTitle === ''} + /> +